Веб-дизайнеру
Веб-разработчику
Дополнительно
Кнопка для сайта CSS3 + анимация загрузки
Скачать
Демо
↓ Также Вам будет интересно ↓
В данной статье Вы можете наглядно увидеть, как создавать красивую кнопку или можете скачать готовый пример, с готовым кодом и стилями. Кнопка для сайта CSS3 с красивой анимацией, подойдет практически для любого ресурса (например для сервиса загрузок, или чего другого). Создание схожей кнопки, только с уклоном в сторону 3D, вы можете найти в статье “Современная 3D красивая кнопка CSS”.
Также в этом примере мы будем использовать шрифт, с подбором красивых иконок. Вообще замысел состоит в том, чтобы отображаемый значок исчезал при наведении и появлялась стрелка, которая двигается сверху вниз. И как обычно, начнем с html кода.
HTML
Структура кнопки включает в себя 4 элемента span, внутри ссылки. Тег span, с классом a-btn-slide-icon, будет использован для создания анимации стрелки, двигающееся сверху вниз.
|
1 2 3 4 5 6 |
<a href="#" class="a-btn"> <span class="a-btn-symbol">Z</span> <span class="a-btn-text">Загрузить сейчас!</span> <span class="a-btn-slide-text">Windows Vista / Windows 7</span> <span class="a-btn-slide-icon"></span> </a> |
CSS
Так как мы будем использовать шрифт для создания иконок, то нам необходимо подключить его. Скачать шрифт Вы можете вместе с исходниками. Стрелку мы спрячем, установив её верхнее значение до 30px.
|
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 |
@font-face { font-family: 'WebSymbolsRegular'; src: url('websymbols/websymbols-regular-webfont.eot'); src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('websymbols/websymbols-regular-webfont.woff') format('woff'), url('websymbols/websymbols-regular-webfont.ttf') format('truetype'), url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); font-weight: normal; font-style: normal; } .a-btn{ border-radius: 50px; padding: 10px 30px 10px 70px; position: relative; float:left; display: block; overflow: hidden; margin: 10px; background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 74%,rgba(237,237,237,1) 100%); box-shadow: 0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1); transition: box-shadow 0.3s ease-in-out; } .a-btn-symbol{ font-family: 'WebSymbolsRegular', cursive; color: #555; font-size: 20px; text-shadow: 1px 1px 2px rgba(255,255,255,0.5); position:absolute; left: 20px; line-height: 32px; transition: opacity 0.3s ease-in-out; } .a-btn-text{ font-size: 20px; color: #d7565b; line-height: 16px; font-weight: bold; font-family: "Myriad Pro", "Trebuchet MS", sans-serif; text-shadow: 1px 1px 2px rgba(255,255,255,0.5); display: block; } .a-btn-slide-text{ font-family: Arial, sans-serif; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #555; text-shadow: 0px 1px 1px rgba(255,255,255,0.9); } .a-btn-slide-icon{ position:absolute; top:-30px; width: 22px; height: 22px; background: transparent url(../images/arrow_down_black.png) no-repeat top left; left:20px; opacity: 0.4; } |
При наведении мы убираем иконку и воспроизводим анимацию движения стрелки:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.a-btn:hover{ background: #fff; box-shadow: 0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1); } .a-btn:hover .a-btn-symbol{ opacity: 0; } .a-btn:hover .a-btn-slide-icon{ -webkit-animation: slideDown 0.9s linear infinite; } |
При нажатии кнопки active, мы делаем красный фон и добавляем внутреннюю тень для эффекта нажатия:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.a-btn:active{ background: #d7565b; box-shadow: 0px 2px 2px rgba(0,0,0,0.6) inset, 0px 0px 0px 1px rgba(188,188,188,0.1); } .a-btn:active .a-btn-text{ color: #fff; text-shadow: 0px 1px 1px rgba(0,0,0,0.3); } .a-btn:active .a-btn-slide-text{ color: rgba(0,0,0,0.4); text-shadow: none; } |
И, наконец, простой код анимации для движения стрелки сверху вниз:
|
1 2 3 4 |
@keyframes slideDown { 0% { top: -30px; } 100% { top: 80px;} } |
Вот все и готово! Как видите, ничего сложного или сверхъестественного здесь нет. Пользуйтесь!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
