Веб-дизайнеру
Веб-разработчику
Дополнительно
Кнопки для интернет магазина + анимация на CSS3!
Скачать
Демо
↓ Также Вам будет интересно ↓
CSS3 кнопки “Bubble” с анимацией пузырей!
Простые иконки с эффектом при наведении + 17 вариантов
Кнопки CSS3 – творческие стили 30+ кнопок!
Скачать продающую графику PSD для ваших проектов в 4-х оттенках
CSS3 эффект при наведении на изображение + 5 примеров!
CSS3 эффекты: изображение с блоками подсказок!
Аналог кнопок на CSS3, которые мы создавали в статье “Эффектные кнопки CSS3 с анимацией иконок”, только немного видоизмененный дизайн, и другой эффект анимации. Эти кнопки для интернет магазина, созданы на основе последних технологий CSS3.
HTML
Стандартная структура кнопки:
|
1 2 3 4 5 6 |
<a href="#" class="a-btn"> <span class="a-btn-slide-text">$29</span> <img src="images/icons/5.png" alt="Photos" /> <span class="a-btn-text"><small>Register right now &</small> Download</span> <span class="a-btn-icon-right"><span></span></span> </a> |
Текст кнопки можно легко переписать, изменив его в соответствующих строках.
CSS стили
Стили почти такие же, как и у кнопки, которую мы делали раньше (ссылка в начале статьи). Мы просто изменим цвета, но не только. Ещё мы сделаем что-то другое при наведении курсора мыши на кнопку. При наведении иконка исчезает, и на её месте появляется цена. Стрелка изменит вой цвет на красный:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.a-btn:hover{ box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); } .a-btn:hover img{ opacity: 0; } .a-btn:hover .a-btn-slide-text{ opacity: 1; transform: scale(1); } .a-btn:hover .a-btn-icon-right span{ opacity: 1; background-color: #bc3532; } |
Состояние кнопки при нажатии будет таким же, как и в предыдущем примере. Мы только изменим цвет, а также выполним вращение иконки стрелки на 360 градусов:
|
1 2 3 4 5 6 7 8 9 10 |
.a-btn:active { position: relative; top: 1px; background: #5d81ab; box-shadow: 1px 1px 2px rgba(0,0,0,0.4) inset; border-color: #80a9da; } .a-btn:active .a-btn-icon-right span{ transform: rotate(360deg); } |
Вот и кнопка готова, и Вы можете преобразить свой интернет магазин (или просто сайт), красивой, анимационной кнопочкой!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
