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

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

ОБСУЖДЕНИЕ

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

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

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

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

Чекбокс на css3Чекбокс на css3

Чекбокс имитирующий реалистично кнопку включения, идея в принципе неплохая, но......

Анимационная кнопка с помощью css3Анимационная кнопка с помощью css3

Красивая анимационная кнопка похожая на 3D, при наведении курсора мыши на кнопку, она плавно......

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном...

Красивая кнопка на css3, анимация фона происходит при наведении курсора на кнопку....

VIP кнопка на css3VIP кнопка на css3

Красивая анимационная кнопка с эффектом блеска, при наведении курсора на кнопку, происходит красивая анимация на фоне кнопки....

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

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

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

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

Стильный комплект форм «Zi-4-Forms»Стильный комплект форм «Zi-4-Forms»

Zi-4-Forms - это комплект форм использующий CSS3, комплект состоит с формы входа, регистрации, восстановления пароля, контактная форма....

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

Отличное вертикальное меню, хорошо подойдёт к блогу или информационному сайту......

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid Navig...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

Многоуровневое горизонтальное меню на css3Многоуровневое горизонтальное меню на cs...

Отличное горизонтальное выпадающее многоуровневое меню на css3....

Слайд меню с помощью css3 и JQueryСлайд меню с помощью css3 и JQuery

Креативное вертикальное меню на css3 и JQuery

Фиксированная панель с навигацией на css3Фиксированная панель с навигацией на css...

Панель фиксируется внизу страницы и имеет не большую навигацию, что очень удобно если вам нужно вывести какие то важные ссылки или информацию....

Горизонтальное мульти менюГоризонтальное мульти меню

Выпадающее мульти меню, как вариант вывода безграничного количества пунктов....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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