background
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Анимационная кнопка css3

Анимационная кнопка с помощью css3
Просмотров: 956  Скачан: 207 раз  Комментариев в теме: 0

Красивая анимационная кнопка для вашего сайта реализована с помощью css3, чем то похожая на стиль 3D. При наведении курсора мыши на кнопку, она плавно увеличивается, одновременно с этим прокручивается значок, который расположен с левой стороны кнопки. Кнопка работает во всех современных браузерах.

Шаг 1 - создание разметки

 

HTML

<div class="button-wrapper">
    <a href="#" class="a-btn">
        <span class="a-btn-symbol">J</span>
        <span class="a-btn-text">Загрузить сейчас</span> 
        <span class="a-btn-slide-text">Windows Vista / Windows 7</span>
    </a>
    <a href="#" class="a-btn">
        <span class="a-btn-symbol">i</span>
        <span class="a-btn-text">Загрузить сейчас</span> 
        <span class="a-btn-slide-text">Windows Vista / Windows 7</span>
    </a>
    <a href="#" class="a-btn">
        <span class="a-btn-symbol">X</span>
        <span class="a-btn-text">Загрузить сейчас</span> 
        <span class="a-btn-slide-text">Windows Vista / Windows 7</span>
    </a>
    <a href="#" class="a-btn">
        <span class="a-btn-symbol">w</span>
        <span class="a-btn-text">Загрузить сейчас</span> 
        <span class="a-btn-slide-text">Windows Vista / Windows 7</span>
    </a>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />
Материалы по теме:

Mega Web Buttons PackMega Web Buttons Pack

Mega Pack кнопок на css, в паке собрано около 40-ка кнопок с разными иконками....

Кнопка с подтекстом на css3Кнопка с подтекстом на css3

Тот же принцип действия что и в РАСКРЫВАЮЩИЕСЯ КНОПКЕ которую вы возможно уже видели, но с......

Оригинальные кнопки на cssОригинальные кнопки на css

Красивые кнопки, прекрасно подойдут любому сайту, все сделано на чистом css....

Набор градиентных кнопок на css3Набор градиентных кнопок на css3

Неплохой набор кнопок, в нем вы найдёте кнопки разного цвета, (округлённые, прямоугольные, маленькие)....

Социальная панель на css3Социальная панель на css3

Красивая раскрывающиеся социальная панель на css3 с использованием иконических шрифтов. При наведении курсора на значок, происходит раскрытие панели, ...

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на ...

Очень красивая и главное удобная кнопка на css3, при наведении курсора на кнопку, она......

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....
Интересные публикации:

Paris ClarkParis Clark

Красивый html шаблон Paris Clark, на главной странице используется привлекательный слайдер, имеется портфолио, контактная форма......

DecadenceDecadence

Очень красивый универсальный шаблон Decadence на историческую тему, построенный на HTML5, в шаблоне имеется выпадающее меню......

Softdate Pro v1.3Softdate Pro v1.3

Softdate pro - это социальная платформа знакомств, которая предоставляет возможность общаться с людьми......

Эффектное вертикальное менюЭффектное вертикальное меню

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......

Max Mag v1.0.9Max Mag v1.0.9

Max Mag - это адаптивный широкоформатный шаблон для WordPress....

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css3

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....

SonjaSonja

Шаблон Sonja построенный на HTML5, в шаблоне красиво реализована главная страница, имеется оригинальная галерея, стрелка вверх, видео проигрыватель......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.0/5( Голосов 7 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить