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

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

ОБСУЖДЕНИЕ

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

Кнопка с анимацией с помощью css3
Просмотров: 1249  Скачан: 195 раз  Комментариев в теме: 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" />
Материалы по теме:

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

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

Мега cборка социальных кнопок на css +300Мега cборка социальных кнопок на cs...

Сборка +300 социальных кнопок , это 300 разных социальных кнопок созданных на css, которые без сомнения украсят любой сайт....

Сборка кнопок на cssСборка кнопок на css

Лёгкая подборка кнопок на css, в подборку вошли восемь разных кнопок созданных с помощью css....

Социальные кнопки на CSSСоциальные кнопки на CSS

Стильные кнопки социальных сетей (Facbook, Twitter, Google+) с применением иконических шрифтов....

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

Кнопки с градиентом, такие кнопки можно встретить довольно часто......

Блок на CSS3 c эффектом 3D трансформацииБлок на CSS3 c эффектом 3D трансфор...

Блок реализован с помощью css3 и использует 3D трансформацию для изменения своего вида....

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

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

Cumico v1.4Cumico v1.4

Универсальная премиум тема для WordPress с адаптивной вёрсткой и стильным дизайном. Возможность подключить Woocommerce это идеальное решение для......

Оригинальная анимационная контактная формаОригинальная анимационная контактная фор...

Оригинальная анимационная контактная форма, в довольно привлекательном стиле. Форма представлена в виде открытого конверта, при наведении курсора мыши...

Горизонтальное меню на jQuery «Slick Menu»Горизонтальное меню на jQuery «Slick Men...

Меню в довольно интересном стиле, меню раскидано в виде картинок, при наведении курсора мыши на картинку......

World WideWorld Wide

WorldWide - это премиум тема wordpress для сайтов новостной и журнальной тематики с поддержкой плагина WPML и WooCommerce....

Вкладки контента css3Вкладки контента css3

Красивые вкладки контента реализованные с помощью css3...

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

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....

Форма обратной связи на PHP, AJAX, JSФорма обратной связи на PHP, AJAX, JS

Красивая форма обратной связи для вашего сайта на php, ajax и js. Форма может похвастаться капчей, проверкой полей формы на валидность и сообщениях об...
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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