Веб-дизайнеру
Веб-разработчику
Дополнительно
Эффектные кнопки CSS3 с анимацией иконок
Скачать
Демо
↓ Также Вам будет интересно ↓
В этом примере мы создадим большие кнопки CSS3, со все необходимой информацией внутри. Особенно они могут быть полезны для интернет магазина. Аналогичный пример кнопок в статье “Кнопки для интернет магазина + анимация на CSS3!”. Кнопка будет иметь иконку, основной текст, стрелки на правой стороне и цену, которая появится только, при наведении.
HTML разметка
Структура очень проста: обычное изображение иконки и другие элементы кнопки, заключенные в тег span.
|
1 2 3 4 5 6 |
<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>Доступно к заказу</small> App Store</span> <span class="a-btn-icon-right"><span></span></span> </a> |
CSS стили кнопки
В стилях мы пропишем всё необходимое, чтобы создать правильный эффект анимации при наведении курсора мыши. Изначально цена будет невидима, поэтому установим ей прозрачность opacity до 0. Для создания более реалистичного эффекта будем использовать тень box-shadow:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
.a-btn{ background: linear-gradient(top, #a9db80 0%,#96c56f 100%); padding-left: 90px; padding-right: 105px; height: 90px; display: inline-block; position: relative; border: 1px solid #80ab5d; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); border-radius: 4px; float: left; clear: both; margin: 10px 0px; overflow: hidden; transition: box-shadow 0.3s ease-in-out; } .a-btn img{ position: absolute; left: 15px; top: 13px; border: none; transition: all 0.3s ease-in-out; } .a-btn .a-btn-slide-text{ position: absolute; font-size: 36px; top: 18px; left: 18px; color: #6d954e; opacity: 0; text-shadow: 0px 1px 1px rgba(255,255,255,0.4); transition: opacity 0.2s ease-in-out; } .a-btn-text{ padding-top: 13px; display: block; font-size: 30px; text-shadow: 0px -1px 1px #80ab5d; } .a-btn-text small{ display: block; font-size: 11px; letter-spacing: 1px; } .a-btn-icon-right{ position: absolute; right: 0px; top: 0px; height: 100%; width: 80px; border-left: 1px solid #80ab5d; box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset; } .a-btn-icon-right span{ width: 38px; height: 38px; opacity: 0.7; border-radius: 20px; position: absolute; left: 50%; top: 50%; margin: -20px 0px 0px -20px; border: 1px solid rgba(0,0,0,0.5); background: #4e5c50 url(../images/arrow_down.png) no-repeat center center; box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5); transition: all 0.3s ease-in-out; } |
При наведении hover на кнопку мы показываем цену и эффектно убираем изображение:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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{ transform: scale(10); opacity: 0; } .a-btn:hover .a-btn-slide-text, .a-btn:hover .a-btn-icon-right span{ opacity: 1; } |
При нажатии active будет применена внутренняя тень, как-будто элемент вдавлен. Стрелка справа будет увеличена:
|
1 2 3 4 5 6 7 8 9 10 |
.a-btn:active { position:relative; top:1px; background:#80ab5d; box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; border-color: #a9db80; } .a-btn:active .a-btn-icon-right span{ transform: scale(1.4); } |
Эти кнопки CSS3 реализованы и Вы можете свободно их использовать у себя на сайте! Приятного дня!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
