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

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

ОБСУЖДЕНИЕ

Кнопка с анимацией на css3

Кнопка с анимацией с помощью css3
Просмотров: 1437  Скачан: 232 раз  Комментариев в теме: 0

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

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

 

HTML

<div class="button-wrapper">
    <a href="#" class="a-btn">
        <span class="a-btn-slide-text">$29</span>
        <img src="images/icons/1.png" alt="Photos" />
        <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> 
        <span class="a-btn-icon-right"><span></span></span>
    </a>
    <a href="#" class="a-btn">
        <span class="a-btn-slide-text">$19</span>
        <img src="images/icons/2.png" alt="Maps" />
        <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> 
        <span class="a-btn-icon-right"><span></span></span>
    </a>
    <a href="#" class="a-btn">
        <span class="a-btn-slide-text">$24</span>
        <img src="images/icons/3.png" alt="Settings" />
        <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> 
        <span class="a-btn-icon-right"><span></span></span>
    </a>
    <a href="#" class="a-btn">
        <span class="a-btn-slide-text">$39</span>
        <img src="images/icons/4.png" alt="Wireless" />
        <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> 
        <span class="a-btn-icon-right"><span></span></span>
    </a>
</div>
<div class="button-wrapper">
    <a href="#" class="a-btn2">
        <span class="a-btn-slide-text2">$29</span>
        <img src="images/icons/5.png" alt="Photos" />
        <span class="a-btn-text2"><small>Register right now</small> Download</span> 
        <span class="a-btn-icon-right2"><span></span></span>
    </a>
    <a href="#" class="a-btn2">
        <span class="a-btn-slide-text2">$19</span>
        <img src="images/icons/6.png" alt="Maps" />
        <span class="a-btn-text2"><small>Register right now</small> Download</span> 
        <span class="a-btn-icon-right2"><span></span></span>
    </a>
    <a href="#" class="a-btn2">
        <span class="a-btn-slide-text2">$24</span>
        <img src="images/icons/7.png" alt="Settings" />
        <span class="a-btn-text2"><small>Register right now</small> Download</span> 
        <span class="a-btn-icon-right2"><span></span></span>
    </a>
    <a href="#" class="a-btn2">
        <span class="a-btn-slide-text2">$39</span>
        <img src="images/icons/8.png" alt="Wireless" />
        <span class="a-btn-text2"><small>Register right now</small> Download</span> 
        <span class="a-btn-icon-right2"><span></span></span>
    </a>
</div>

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

 

CSS

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

Социальные кнопки с помощью cssСоциальные кнопки с помощью css

Социальные кнопки с применением иконического шрифта....

Социальные иконки на css3Социальные иконки на css3

Социальные иконки на css3, при наведении курсора на иконку, она делается полупрозрачной....

Резиновые кнопки на css3 (Checkbox)Резиновые кнопки на css3 (Checkbox)

Ещё один красивый чекбокс, который реалистично имитирует резиновые кнопки, ну или мягкие как их ещё называют....

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

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

Сборка кнопок #2 на css3Сборка кнопок #2 на css3

В сборку вошли 12 неплохих кнопок на css. Кнопки работают в браузерах OPERA, Firefox, Chrome, IE....

Вращающиеся кнопки на css3Вращающиеся кнопки на css3

Довольно интересная идея создать такую анимацию с кнопками. Когда вы наводите на кнопку курсор мыши, она начинает быстро вращаться, когда......

Кнопка с анимацией на css3Кнопка с анимацией на css3

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

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....

Выпадающее меню на css3Выпадающее меню на css3

Красивое выпадающее меню с применением иконического шрифта, меню полностью на css3......

Шаблон EnvisionШаблон Envision

Качественный HTML шаблон Envision, на главной странице располагается красивый слайдер, есть галерея, контактная форма, табы, набор кнопок......

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

Отличным слайдер с очень богатым функционалом, а если быть точнее, то это широко известный плагин «bxSlider», плагин постоянно усовершенствуется......

XMarket v1.1XMarket v1.1

XMarket - это премиум шаблон интернет магазина для любого вида продукции, один из самых мощных и гибких на сегодняшний день....

Web StoreWeb Store

Шаблон интернет магазина Web Store, в шаблоне имеется готовое решение для корзины, детального просмотра товара и каталога,...

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

Отличное вертикальное меню, хорошо подойдёт к блогу или информационному сайту......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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