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

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

ОБСУЖДЕНИЕ

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

Кнопка с анимацией с помощью css3
Просмотров: 1330  Скачан: 213 раз  Комментариев в теме: 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Круглая кнопка с анимационным фоном...

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

Pack кнопок #3 на CSS3Pack кнопок #3 на CSS3

Pack кнопок №3 на css3, в пак вошло около 70 кнопок разного размера, цвета (круглые, прямоугольные, градиентные)....

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

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

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

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

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

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

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

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

Pack кнопок #2 на CSS3Pack кнопок #2 на CSS3

Pack кнопок 2, в паке представлены 20 кнопок на css3 с разными иконками....
Интересные публикации:

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

Меню с красивым эффектом, суть в том, когда вы перемешаете курсор мыши по навигации, ползунок будет плавно......

Прозрачная контактная форма на css3Прозрачная контактная форма на css3

Прозрачная контактная форма на CSS3 в тёмном стиле. В форме реализована проверка полей......

Футер на cssФутер на css

Красивый и в тоже время довольно оригинальный футер на css, он же подвал сайта....

Набор элементов дизайна «CSS3 Responsive Forms Pack»Набор элементов дизайна «CSS3 Responsive...

Это профессиональный набор элементов дизайна ( кнопки, формы, Checkbox и многое другое)....

BuddyBuddy

Buddy - это современный, отвечающий всем требованиям шаблон для WordPress с полной интеграцией и поддержкой BuddyPress....

Аккордеон изображенийАккордеон изображений с помощью css3

Красивый горизонтальный аккордеон для вывода изображений на сайте....

Вертикальное меню на css (Аккордеон)Вертикальное меню на css (Аккордеон)

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

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

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

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


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