Жёлтая кнопка CSS3 с описанием



↓ Также Вам будет интересно ↓
Что делать, если необходимо создать кнопку с описанием, а места для неё, ну очень мало. Что мы создадим? Это будет кнопка CSS3 с открывающимся вниз описанием при наведении. При этом значок стрелки, будет слегка повернут на 45 градусов. Кнопка создана с применением классных анимационных эффектов, которые возможно реализовать с помощью CSS3. В другой статье, также приводится способ красивого оформления кнопки CSS с выезжающим текстом вправо.
HTML разметка
Текст, который будет выезжать вниз при наведении, имеет класс a-btn-slide-text
. Сама же структура кнопки следующий вид:
1 2 3 4 5 |
<a href="#" class="a-btn"> <span class="a-btn-text">Регистрация</span> <span class="a-btn-slide-text">Прямо сейчас!</span> <span class="a-btn-icon-right"><span></span></span> </a> |
CSS
В обычном состоянии кнопка будет иметь определенную высоту, которую мы будем анимировать при наведении курсора мыши с целью отображения дополнительного сообщения. Дополнительное сообщение a-btn-slide-text
будет позиционироваться абсолютно и иметь высоту от 0 до 30 пикселей.
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 |
.a-btn{ background: linear-gradient(top, #feda71 0%,#febb4a 100%); border: 1px solid #f5b74e; border-color: #f5b74e #e5a73e #d6982f; box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395; padding: 0px 80px 0px 10px; height: 38px; display: inline-block; position: relative; border-radius: 4px; float: left; margin: 10px; overflow: hidden; transition: all 0.3s linear; } .a-btn-text{ padding-top: 5px; display: block; font-size: 18px; white-space: nowrap; color: #996633; text-shadow: 0 1px 0 #fedd9b; transition: all 0.3s linear; } .a-btn-slide-text{ position:absolute; top: 35px; left: 0px; width: auto; right: 52px; height: 0px; background: #fff; color: #996633; font-size: 13px; white-space: nowrap; font-family: Georgia, serif; font-style: italic; text-indent: 15px; overflow: hidden; line-height: 30px; box-shadow: -1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset; transition: height 0.3s linear; } .a-btn-icon-right{ position: absolute; right: 0px; top: 0px; height: 100%; width: 52px; border-left: 1px solid #f5b74e; box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset; } .a-btn-icon-right span{ width: 38px; height: 38px; opacity: 0.7; position: absolute; left: 50%; top: 50%; margin: -20px 0px 0px -20px; background: transparent url(../images/arrow_right.png) no-repeat 50% 55%; transition: all 0.3s linear; } |
При наведении мы будем менять высоту кнопки, и дополнительный элемент текста. Мы также поворачиваем иконку стрелки на 45 градусов:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.a-btn:hover{ height: 65px; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); } .a-btn:hover .a-btn-text{ text-shadow: 0px 1px 1px rgba(0,0,0,0.2); color: #fff; } .a-btn:hover .a-btn-slide-text{ height: 30px; } .a-btn:hover .a-btn-icon-right span{ opacity: 1; transform: rotate(-45deg); } |
Во время нажатия, кнопка CSS3 будет немного двигаться. Также мы настроим цвета так, чтобы был эффект нажатия, т.е. казалось, что она нажата.
1 2 3 4 5 6 7 8 |
.a-btn:active { position:relative; top:1px; background: linear-gradient(top, #fec354 0%,#fecd61 100%); /* W3C */ border-color: #d29a3a #cc9436 #c89133; text-shadow: 0 1px 0 #fee1a0; box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e; } |
И вот, наша кнопка готова! Можете смело ставить её на свой сайт.
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
