Мы рассмотрим каждый пример и разберем как выглядит их HTML-структура и стили для разных состояний кнопок.
Обратите внимание, что анимация/переходы будут работать только в браузерах, которые поддерживают эти CSS3-свойства.
Чтобы не захламлять код в уроке я не буду использовать префиксы для различных браузеров. Их вы сможете увидеть в архиве с примерами.
Пример 1
В этом примере мы создадим большую кнопку с несколькими элементами на ней. Она будет иметь иконку, основной текст, стрелку с правой стороны и цену, которая будет появляться только когда мы наводим курсор.
HTML-разметка
Структура довольно проста: иконка изображения и другие элементы в тегах span:
Available on the Apple App Store
CSS
В стилях мы убедимся что переходы установлены правильно для элемента, который мы хотим анимировать при наведении. Цена будет невидимой, установим её прозрачность на 0. Применение множества box-shadow позволит нам создавать реалистичные эффекты:.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; }
При наведении мыши на кнопку мы будем менять тень, а также покажем цену и спрячем изображение:
.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; }
В активном состоянии сделаем кнопку нажатой добавив тень. Значок стрелки справа будет увеличен:
.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); }
Пример 2
Второй пример будет очень похож на первый, только мы добавим несколько новых эффектов.
HTML-разметка
Разметка на этом примере будет такой же, как и в первом примере.CSS
Стили почти такие же, как и в первом примере, мы просто адаптируем цвета. Но мы сделаем другой эффект при наведении. Цена увеличится до исходного размера и иконка исчезнет. Для стрелки изменим цвет фона на красный:.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; }
Активное состояние будет таким же, как и в предыдущем примере. Мы будем только изменять цвета. Когда мы нажимаем кнопку, мы будем также поворачивать стрелку:
.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); }
Пример 3
В этом примере мы попытаемся сделать что-то совершенно другое. Кнопка будет расширяться вниз при наведении и раскрывать еще одно сообщение. Значок стрелки будет слегка вращаться.
HTML-разметка
Разметка в примере 3, будет несколько иной, чем в предыдущих примерах. Текст, который будет скользить вниз, будет в теге span с классом «a-btn-slide-text»:Register now
CSS
В нормальном состоянии кнопка будет иметь определенную высоту, мы будем анимировать её при наведении с целью вывода дополнительных сообщений. Дополнительное сообщение «a-btn-slide-text» будет позиционироваться абсолютно и мы будем увеличивать его высоту от 0 до 30 пикселей при наведении..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 градусов:
.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); }
В активном состоянии кнопка будет немного двигаться и изменять цвет, так что кнопка будет казаться нажатой:
.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; }
Пример 4
В примере 4, мы будем выдвигать дополнительное сообщение, как и в предыдущем примере, но мы сделаем это теперь с правой стороны. Это будет выглядеть как будто кнопка открывает сообщение внутри себя.
HTML-разметка
Разметка в этом примере такая же, как и в предыдущем.CSS
Стили кнопки будут похожи на предыдущий пример. Мы только изменим цвет и положение дополнительного текста:.a-btn{ background: linear-gradient(top, #80a9da 0%,#6f97c5 100%); padding-left: 20px; padding-right: 80px; height: 38px; display: inline-block; position: relative; border: 1px solid #5d81ab; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); border-radius: 20px; float: left; clear: both; margin: 10px 0px; overflow: hidden; transition: all 0.3s linear; } .a-btn-text{ padding-top: 5px; display: block; font-size: 18px; white-space: nowrap; text-shadow: 0px 1px 1px rgba(255,255,255,0.3); color: #446388; transition: all 0.2s linear; } .a-btn-slide-text{ position:absolute; height: 100%; top: 0px; right: 52px; width: 0px; background: #63707e; text-shadow: 0px -1px 1px #363f49; color: #fff; font-size: 18px; white-space: nowrap; text-transform: uppercase; text-align: left; text-indent: 10px; overflow: hidden; line-height: 38px; box-shadow: -1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; transition: width 0.3s linear; } .a-btn-icon-right{ position: absolute; right: 0px; top: 0px; height: 100%; width: 52px; border-left: 1px solid #5d81ab; 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; }
При наведении мы увеличим справа padding кнопки, а также ширину тега span с классом «a-btn-slide-text»:
.a-btn:hover{ padding-right: 180px; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); } .a-btn:hover .a-btn-text{ text-shadow: 0px 1px 1px #5d81ab; color: #fff; } .a-btn:hover .a-btn-slide-text{ width: 100px; } .a-btn:hover .a-btn-icon-right span{ opacity: 1; }
В активном состоянии создадим эффект нажатия при помощи тени:
.a-btn:active { position: relative; top: 1px; background: #5d81ab; box-shadow: 1px 1px 2px rgba(0,0,0,0.4) inset; border-color: #80a9da; }
Пример 5
В этом примере мы будем использовать символьный шрифт для иконок. Идея заключается в создании следующего эффекта: при наведении мыши иконка исчезает и появляется движущаяся стрелка.
HTML-разметка
Структура будет состоять из 4 тегов span внутри ссылки. Span с классом «a-btn-slide-icon» будет анимировать стрелку, она будет двигаться сверху вниз.Z Download Now
CSS
Поскольку мы будем использовать шрифт для отображения иконки с левой стороны, мы должны будем подключить этот шрифт.Мы будем скрывать стрелку, установив её значение top равным -30px.
@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; }
При наведении мы будем прятать значок слева и бесконечно проигрывать анимацию для стрелки:
.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; }
При нажатии на кнопку мы сделаем её красной и создадим эффект нажатия добавив тень:
.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; }
И, наконец, простая анимация для перемещения стрелки сверху вниз:
@keyframes slideDown { 0% { top: -30px; } 100% { top: 80px;} }
Пример 6
В этом примере мы создадим круглую кнопку со звездочкой в ней. Мы заставим звезду вращаться при наведении курсора (с небольшим импульсом) и сделаем появление дополнительного текста.
HTML-разметка
У нас будет три тега span в нашей кнопке-ссылке. В последнем будет скрытый текст, который показывается при наведении.Sign up It"s free!
CSS
Мы поиграемся немного с nth-child в этом примере. Так как у нас есть 3 тега span, мы будем обращаться к ним так: .a-btn span:nth-child(1), .a-btn span:nth-child(2) and .a-btn span:nth-child(3).Мы сделаем кнопки круглыми и добавим необычные тени к ним. Для того, чтобы отцентрировать основной текст по вертикали, мы установим display равным table-cell. Звезды и скрытый текст будет позиционироваться абсолютно.
.a-btn{
width: 120px;
height: 120px;
border-radius: 50%;
display: block;
margin: 20px;
float: left;
background: #f0ad4e;
position: relative;
box-shadow:
0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset,
0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset,
0px 0px 0px 7px #fff,
0px 0px 1px 8px rgba(188, 188, 188, 0.4),
0px 0px 0px 9px #fff;
transition: all 0.3s linear;
}
.a-btn span{
display: table-cell;
width: 80px;
height: 80px;
padding: 20px;
text-align: center;
vertical-align: middle;
font-size: 26px;
color: #fff;
text-shadow: 0px 1px 1px #A03F16;
font-family: "Arvo", "Myriad Pro", "Trebuchet MS", sans-serif;
transition: all 0.3s linear;
}
.a-btn span:nth-child(1),
.a-btn span:nth-child(3){
position: absolute;
top: 0px;
left: 0px;
font-size: 40px;
line-height: 36px;
opacity: 0;
}
.a-btn span:nth-child(1){
background: transparent url(../images/star.png) no-repeat center center;
opacity: 0.2;
}
При наведении мы будем менять тень кнопки так, что она кажется поднятой. Скрытый текст будет проявляться, и мы применим анимацию для начального текста. Мы также применим анимацию вращения для звезды:
.a-btn:hover{
background: rgba(170, 77, 27, 0.6);
box-shadow:
0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset,
0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset,
0px 0px 0px 7px #fff,
1px 4px 5px 8px rgba(188, 188, 188, 0.6),
0px 0px 0px 9px #fff;
}
.a-btn:hover span:nth-child(3){
opacity: 1;
}
.a-btn:hover span:nth-child(2){
transform: scale(0);
opacity: 0;
}
.a-btn:hover span:nth-child(1){
animation: rotate 1s linear;
}
Теперь сделаем кнопку якобы нажатой при нажатии на нее:
.a-btn:active{
box-shadow:
0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset,
0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset,
0px 0px 0px 7px #fff,
0px -1px 0px 8px rgba(188, 188, 188, 0.3),
0px 0px 0px 10px #fff;
}
.a-btn:active span:nth-child(2){
color: rgba(170, 77, 27, 0.8);
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
}
Анимация вращения/пульсации выглядит следующим образом:
@-webkit-keyframes rotate{
0% { transform: scale(1) rotate(0);}
50% { transform: scale(0.5) rotate(180deg);}
100% { transform: scale(1) rotate(360deg);}
}
Пример 7
В последнем примере мы создадим псевдо 3D-кнопку, использовав некоторые классные тени.
HTML-разметка
Структура будет такая же как и в пятом примереCSS
Стиль будет также очень похож на пример 5, мы просто изменим некоторые цвета и тени:.a-btn{ border-radius: 10px; padding: 10px 30px 10px 70px; position: relative; float:left; display: block; overflow: hidden; margin: 10px; background: linear-gradient(top, #b7f2f4 0%,#7ce7ea 100%); border: 1px solid #90c6c8; border-color: #90c6c8 #78bdc0 #65b6ba; box-shadow: 0px -5px 0px 0px #458a8c, 0 1px 1px #d5d5d5, 0 1px 0 rgba(255,255,255,0.8) inset; transition: all 0.2s linear; } .a-btn-symbol{ font-family: "WebSymbolsRegular", cursive; color: #437b7d; text-shadow: 0 1px 0 #bef3f5; font-size: 20px; position:absolute; left: 20px; width: 20px; text-align: center; line-height: 32px; transition: all 0.3s ease-in-out; } .a-btn-text{ font-size: 20px; color: #437b7d; text-shadow: 0 1px 0 #bef3f5; line-height: 16px; font-weight: bold; font-family: "Myriad Pro", "Trebuchet MS", sans-serif; 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); }
При наведении мы будем увеличивать кнопку и вращать маленькую иконку:buttons Добавить метки
Доброго времени суток, уважаемые читатели . В этот день мы будем создавать набор красивых иконок для сайта с помощью CSS3 и анимации . Благодаря этой кнопки Вы сможете превратить любую ссылку на странице в анимированную кнопку с простым присвоением имени класса. В общем ничего тут сложного нет как на первый взгляд.
Напоминаю, что эти кнопки являются бесплатными, и вы сможете их бесплатно скачать . Поехали.
Анимированные CSS3 кнопки для Вашего сайта
Теперь несколько слов о размере и скругленных углов кнопок:
/* Три размера кнопок */ .button.big { font-size:30px;} .button.medium { font-size:18px;} .button.small { font-size:13px;} /* Скругленные углы кнопок */ .button.rounded{ -moz-border-radius:4em; -webkit-border-radius:4em; border-radius:4em; }
В коде выше указаны три класса — это big , medium и small . Соответственно к каждому классу ставим разные значения в пикселях. Всё хорошо видно на коде выше.
А теперь самое интересная часть — это цвета. Тут, в принципе тоже ничего сложного нет.
/* Гоубая кнопка */ .blue.button{ color:#0f4b6d !important; border:1px solid #84acc3 !important; /* Резервный цвет фона */ background-color: #48b5f2; background-image: url("button_bg.png"), url("button_bg.png"), -moz-radial-gradient(center bottom, circle, rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), -moz-linear-gradient(#4fbbf7, #3faeeb); background-image: url("button_bg.png"), url("button_bg.png"), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(89,208,244,1)), to(rgba(89,208,244,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb)); } .blue.button:hover{ background-color:#63c7fe; background-image: url("button_bg.png"), url("button_bg.png"), -moz-radial-gradient(center bottom, circle, rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px), -moz-linear-gradient(#63c7fe, #58bef7); background-image: url("button_bg.png"), url("button_bg.png"), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(109,217,250,1)), to(rgba(109,217,250,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7)); }
Вот на этом пока что и всё. Хочу заранее предупредить, что в настоящее время, возможно кнопки не будут работать в некоторых браузерах, потому что, ещё пока, не все они поддерживают CSS3. Но мне кажется, что эта проблема скоро решится.
Здравствуйте, уважаемые друзья. Сегодня я расскажу про два способа, которые помогут вам создать анимированную кнопку для ваших сайтов. Вы наверняка, видели много таких кнопок и нажимали на них. Так вот, на своём блоге я периодически рекомендую партнёрские курсы и тренинги, только те, что испробовал сам. И разумеется я интересуюсь статистикой, а статистика говорит, что на привлекательные кнопки люди нажимают на 48% чаще, чем на обычные ссылки.
Принцип создания анимированных кнопок на CSS заключается в следующем, есть три положения. 1 — Исходное, 2 — при наведении курсора и 3 — при нажатии кнопки мышки. В каких-то сервисах есть все три положения, а в каких-то только два. Но главное, чтобы вас устраивал конечный результат.
Видеоурок по второму способу создания анимированных кнопок:
В качестве примера рассмотрим сервис CSS3 ButtonGenerator, в нём как раз всего два положения. Но эффекты смотрятся очень хорошо. Кого смущает отсутствие русского языка, используйте последний генератор, приведённый в списке.
Итак, начинаем.
Открываем главную страницу сервиса. Изначально перед вами будет предварительный вид кнопки и инструменты позволяющие сделать всевозможные настройки.
Первый раздел Text&Font, отвечает за текст, размер шрифта, цвет шрифта, тень шрифта. Именно здесь вы пишете надпись на кнопке, задаёте неё размер, цвет, и тень.
Следующий раздел Background, относится к фону. Здесь можно указать цвет кнопки, градиент кнопки, размер кнопки и смешение фона.
Раздел Border, отвечает за настройки тени и бордюров кнопки. Вы без труда сможете настроить толщину бордюра, закругление углов, и тень кнопки.
Следующий раздел Transform, отвечает за трансформацию кнопки, — это повороты, смещения, искажение.
Следующий раздел Transition, отвечает за плавность анимации. Данные настройки Вы устанавливаете в соответствие с Вашей кнопкой. Действия могут быть применены как ко всей кнопке, так и к отдельным слоям.
Попробовав, несколько раз, поэкспериментировать с настройками и вы поймете, что к чему.
После того как первоначальный вид кнопки настроен, можно переходить к следующему этапу. Это видоизменение кнопки при наведение курсора мышки. Для этого нажимаем на чекбокс, указанный на скриншоте.
Параметры при наведении курсора мышки
Теперь все изменения в настройках вы делаете для кнопки, которые будут отображаться при наведении курсора мыши. И эти настройки зависят индивидуально от каждой кнопки. В качестве примера я изменил настройки поворота, градиента и цвета тени.
Когда готова кнопка, можно переходить к установке кнопки в статью. Для этого в нужном мести статьи устанавливаем код:
Вот наш пример:
Ну что же, теперь вы знаете, как легко и достаточно быстро сделать анимированную кнопку для сайта или блога. Пробуйте и внедряйте, это того стоит. Если будут вопросы пишите в комментариях, постараюсь помощь.
На этом сегодня всё, желаю Вам удачи. И всегда рад видеть на страницах своего блога.
P.S. А вот пример анимированной кнопки на тренинг Дениса Герасимова «Настройка холодного трафика для продвижения партнёрских ссылок». Я прошёл этот тренинг и рекомендую его всем — это без лишнего преувеличения, реальный способ заработка на партнёрских программах. Чем я в принципе и занимаюсь.
Накидал тут эскизик как я вижу кнопку Демо. Идея тут в следующем, сделать кнопку как бы из двух частей, она должна быть анимированной, при наведении раскрываться вторая часть, вытягивая за собой внутренний блок, где находится надпись, а в момент убирания курсора все должно вернуться в исходное положение.
- в уроке задействуем основные стили как:
- псевдоэлементами :before , :after ;
- при помощи position с позиционируем блоки
- псевдоклассами :hover , :activ определим стили при наведении и клику мышки
- и сделаем плавную анимацию при помощи transition, transform
HTML структура кнопки
Имея эскиз перед глазами можно уже представить, как это реализовать на CSS. Нам понадобится основной блок, где будет помещены все элементы кнопки, это будет ее оберткой. Затем у кнопки будет внутренняя часть, которая выезжать при неведении мышки, внутри будем располагать текст «Смотреть пример». Затем идет левая и правая часть кнопки, между ними расположим псевдоэлементы треугольной формы. Да и чуть не забыл, картинка в виде стрелочек. Все это нам нужно будет анимировать, и придать кнопки определенную текстуру.
Открываем свою среду разработки, в моем случае я использую PhpStorm
, создам в ней index.html
, пропишу название «Button DEMO animation CSS
». Создаем
Div.dws-button>a>div.b-demo+div.b-text+div.b-img
Жмем применить и структура сформирована.
В ссылке поставим решетку (# ), что бы она была активна. Пропишем название кнопки "Демо " , в среднем блоке указываем текст "Смотреть пример ", и в нижнем вставляем путь до картинки.
Создаем директорию в которую скопирую картинки, вы можете вставить свои картинки или скачать архив с готовы кодом.
Прописываем путь до картинки src="img/icon.png"
, указываем alt="button"
, на этом у нас каркас готов самой кнопки и можно переходить к оформлению стилей.
Описываем CSS стили кнопки
Следующим этапом, создадим CSS файл style.css и подключим его к индексной странице. Сразу подключаем по ходовой шрифт Cuprum , и больше нам индексный файл не понадобится.
Переходим в style.css , подключаю картинку на задний фон, и сбрасываем всем элементам отступы в блоке .dws-button .
Body{ background-image: url("img/ep_naturalwhite.png"); } .dws-button *{ margin: 0; padding: 0; }
Самой кнопке задаем стиль текста, пропишем ширину ее в 250 пик. и высоту в 70 пик., центруем по середине экрана и делаем отступы с верху в 250 пик. Затем присвоим ей окантовку в 1 пик. для того что бы мы могли видеть границы кнопки при ее анимации когда она будет растягиваться.
Dws-button{ font-family: Cuprum, Arial, Verdana, sans-serif; width: 250px; height: 70px; margin: 250px auto; outline: 1px solid #faa21a; }
У ссылок убираем подчеркивание и назначим им серый цвет.
Dws-button a{ text-decoration: none; color: #2e2e30; }
Затем сразу отберем блоки и зададим им единый белый цвет.
B-demo, .b-img{ background: #ffffff; }
Далее опишем каждый блок по отдельности, отбираем класс .b-demo
и зададим блоку ширину в 105 пик.. Высоту зададим при помощи line-height: 70px;
, центруем текст и увеличим шрифт до 30 пик.. Делаем его полностью заглавными буквами, и padding
задаем левые и правые отступы.
B-demo{ width:105px; line-height: 70px; text-align: center; font-size: 30px; text-transform: uppercase; padding: 0 10px 0 15px; }
Отбираем следующий блок .b-text
, присваиваем ему темный цвет, текст сделаем светлым, указываем размер ему в 24 пик., задаем ширину в 150 пик. и при помощи отступов уменьшим высоту блока. Центруем текст, и задаем внутренние отступы.
B-text{ background: #3e3f3e; color: #ffffff; font-size: 24px; width: 150px; line-height: 20px; text-align: center; padding: 10px 0 10px 10px; }
Отбираем правый блок, устанавливаем ширину в 45 пик. высоту тоже в 45 пик. .padding
отцентруем элемент картинки чуть сместив ее правее.
B-img{ width:45px; line-height: 45px; padding: 20px 0 0 20px; }
Затем с позиционируем эти элементы по отношению блока с классом .dws-button
. Для этого присваиваем классу position: relative;
а вложенным всем блокам position: absolute;
.
Блоки все подстроили под родителя, и теперь пробежимся по ним и отцентруем их.
Классу .b-demo укажем начальные позиции по нулям с лева и сверху и добавим z-index:10; что бы этот блок был выше остальных.
.b-demo{ width:105px; line-height: 70px; text-align: center; font-size: 30px; text-transform: uppercase; padding: 0 10px 0 15px; left: 0; top: 0; z-index: 10; }Блоку с текстом сделаем отступы с лева и сверху по 5 пик.
А блок с картинкой .b-img делаем отступ с левой стороны в 140 пик. , и сверху задаем в 0. Тут же закруглим углы с правой стороны в 10 пик.
.b-img{ width:45px; line-height: 45px; padding: 20px 0 0 20px; left: 140px; top: 0; border-radius: 0 10px 10px 0; }И тоже проделаем с левым блоком.
.b-demo{ width:105px; line-height: 70px; text-align: center; font-size: 30px; text-transform: uppercase; padding: 0 10px 0 15px; left: 0; top: 0; z-index: 10; border-radius: 10px 0 0 10px; }Затем нам нужно сделать два псевдоэлемента, это те самые уголки, которые расположены на их соединении.
Отбираем правый блок и присваиваем ему псевдоэлемент :before
, устанавливаем ширину и высоту по нулям, и при помощи border
рисуем треугольник. Далее нам нужно его с позиционировать, для этого добавляет его в наш набор.
И выравниваем таким образом, что бы он встал в конце блока.
B-demo:before{ content: ""; width: 0; height: 0; border-top: 35px solid transparent; border-left: 10px solid #ffffff; border-bottom: 35px solid transparent; top: 0; left: 129px; }
Обратите внимание, что все блоки мы выравниваем по левому краю, а не по правому, так как анимация будет проходить с лева на права и это ключевой момент.
Затем отбираем следующий блок с картинкой и присваиваем ему псевдоэлемент :after . Прописываем контент, далее ширину и высоту ставим по нулям и при помощи border рисуем треугольник. Абсолютно позиционируем, и выравниваем его по левому краю.
.b-demo, .b-text, .b-img, .b-demo:before, .b-img:after{ position: absolute; } .b-img:after{ content: ""; width: 0; height: 0; border-top: 35px solid transparent; border-left: 10px solid #3e3f3e; border-bottom: 35px solid transparent; top: 0; left: 0; }Основной каркас кнопки у нас готов, осталось ее анимировать и придать ей красивое оформление.
Анимация кнопки в CSS
В основном кнопка готова и приступим к ее анимированию, напишу комментарий, откуда будем писать стили. Первым делом описываем действия при наведении на кнопку.
/* Animation:hover */ .dws-button a:hover .b-demo{ width: 50px; padding: 0 10px 0 10px; font-size: 20px; }
Сразу всем блокам пропишем анимацию плавного перемещения, для этого отбираем их все и задаем transition для всех свойств в 0.5 секунды.
Dws-button a:hover .b-demo, .dws-button a:hover .b-demo:before, .dws-button a:hover .b-text, .dws-button a:hover .b-img, .dws-button a:hover .b-img:after{ transition:all 0.5s; }
Прописываем перемещение с этим блоком псевдоэлементу :before на 69 пик. влево.
Dws-button a:hover .b-demo:before{ left: 69px; }
Делаем перемещение второй части кнопки в правую сторону, указываем, что при наведении сместить блок на 185 пик.
Dws-button a:hover .b-img{ left: 185px; }
Затем блок с текстом будем на 50 пик. выдвигать, отбираем и прописываем перемещение блока.
Dws-button a:hover .b-text{ left: 50px; }
Для того что бы кнопка сразу не схлопывалась после того как убираем курсор, нам нужно задать для элементов блоков в покое transition , сделаем более медленное сживание кнопки в 1.5 сек.
.b-demo, .b-text, .b-img, .b-demo:before, .b-img:after{ position: absolute; transition:all 1.5s; }Затем анимируем эффект вращения иконки при помощи transform на 360 градусов, отбираем картинку и прописываем transform: rotate(360deg) ; и также укажем opacity: 0.5; что бы картинка делалась немного прозрачней.
Dws-button a:hover img{ transform: rotate(360deg); opacity: 0.5; }
Если сейчас наведем на кнопку, эффекта вращения мы не увидим, так как нужно прописать самой картинке transition . Отбираем и прописываем ей это свойство.
B-img img{ transition:all 1.5s; }
Кнопка с эффектом анимированного выдвижения готова, можно скрыть outline, он больше не понадобится и заняться ее оформлением.
Dws-button{ font-family: Cuprum, Arial, Verdana, sans-serif; width: 250px; height: 70px; margin: 250px auto; /*outline: 1px solid #faa21a;*/ position: relative; }
Мы сделали полноценную анимированную кнопку и теперь можно ей придать более красивый вид.
Оформление кнопки в CSS
После того как мы провели все работа по ее свойствам, позицианированию и анимации, приступим к ее оформлению. Поменяем у кнопки общий стиль, добавим background к блокам, сделаем у текста тень и добавим псевдокласс :active который будет срабатывать при клике мышки.
Переходим в дополнительный сервис где у меня уже подготовлены присеты и я просто копирую стиль для кнопки, далее заменяю свой предыдущий на него.
B-demo, .b-img{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f22404+13,8e0b00+65,6d0019+100 */ background: #f22404; /* Old browsers */ background: -moz-linear-gradient(-45deg, #f22404 13%, #8e0b00 65%, #6d0019 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #f22404 13%,#8e0b00 65%,#6d0019 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #f22404 13%,#8e0b00 65%,#6d0019 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f22404", endColorstr="#6d0019",GradientType=1); /* IE6-9 fallback on horizontal gradient */ }
У псевдоэлемента прописываем красный цвет под фон ингридиента кнопки.
.b-demo:before{ content: ""; width: 0; height: 0; border-top: 35px solid transparent; border-left: 10px solid #7B040E; border-bottom: 35px solid transparent; top: 0; left: 129px; }Заменим у ссылок цвет с темного на белый.
Dws-button a{ text-decoration: none; color: #ffffff; }
Придадим тексту тень, для этого допишем в классе .b-demo text-shadow: -1px -1px 1px #000000;
.b-demo{ width:105px; line-height: 70px; text-align: center; font-size: 30px; text-transform: uppercase; padding: 0 10px 0 15px; left: 0; top: 0; z-index: 10; border-radius: 10px 0 0 10px; text-shadow: -1px -1px 1px #000000; }Внутренний блок сделаю в голубоватом цвете.
.b-text{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b3dced+0,29b8e5+50;Custom+2 */ background: #b3dced; /* Old browsers */ background: -moz-linear-gradient(45deg, #b3dced 0%, #29b8e5 50%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, #b3dced 0%,#29b8e5 50%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(45deg, #b3dced 0%,#29b8e5 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b3dced", endColorstr="#29b8e5",GradientType=1); /* IE6-9 fallback on horizontal gradient */ color: #ffffff; font-size: 24px; width: 150px; line-height: 20px; text-align: center; padding: 10px 0 10px 10px; left: 5px; top: 5px; }Сразу меняем цвет у псевдоэлемента :after
Заменим картинку, в место черной установим белую, в начале урока я их закачивал две штуки, прописываем вторую иконку.
И завершающем этапом, опишем стили при клике мышки
Пропишу тут соответствующий комментарий, затем под ним отбираем два блока с псевдоклассом :active , задаем ингредиент только перевернутый.
/* Animation:active */ .dws-button a:active .b-demo, .dws-button a:active .b-img{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f22404+13,8e0b00+49,6d0019+70 */ background: #f22404; /* Old browsers */ background: -moz-linear-gradient(45deg, #f22404 13%, #8e0b00 49%, #6d0019 70%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, #f22404 13%,#8e0b00 49%,#6d0019 70%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(45deg, #f22404 13%,#8e0b00 49%,#6d0019 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f22404", endColorstr="#6d0019",GradientType=1); /* IE6-9 fallback on horizontal gradient */ }
Блоку на заднем плане сделаем градиент в этом стиле только отзеркалиный и добавим эффект тени.
Dws-button a:active .b-text{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b3dced+0,29b8e5+50 */ background: #b3dced; /* Old browsers */ background: -moz-linear-gradient(-45deg, #b3dced 0%, #29b8e5 50%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #b3dced 0%,#29b8e5 50%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #b3dced 0%,#29b8e5 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b3dced", endColorstr="#29b8e5",GradientType=1); /* IE6-9 fallback on horizontal gradient */ box-shadow: 0 0 3px 1px #82DCFF; }
Завершающим стилем пропишем при клике вращение иконки в обратном направлении с ее полным проявлением.
Dws-button a:active img{ transform: rotate(0deg); opacity: 1; }
Получалась довольно эффектная кнопка, которую легко можно модифицировать и оформить под свои задачи. Рекомендую заменить общее ее оформление, сделайте свои присетты, поэкспериментируйте с различными вариантами градиентов, возможно, вы придумаете более оригинальные способы анимации и обязательно поделитесь с ними в комментариях.
Всем кому понравился материал обязательно поделитесь им с друзьями.
- Перевод
Здравствуй, дорогой хабрадруг! Сегодня мы научимся создавать объемные кнопки CSS3! Они основаны на популярной PSD фриби от Orman Clark для его веб-сайта Premium Pixels. Мы постараемся создать копию этих кнопок с помощью CSS с минимальным количеством кода HTML.
Шаг 1: Создаем документ HTML
Мы начнем с создания нового документа HTML. Он будет основан на HTML5 boilerplate для того, чтобы у нас была удобная отправная точка. Теперь мы добавим список с ссылками. Вот в принципе и все, спасибо CSS3 за то, что мы не должны использовать дополнительные дивы и спаны.Каждому пункту списка мы присвоим класс ‘buttons’. И так как Orman использовал различные цвета, мы назначим каждой кнопке свой собственный цвет в виде класса.
Это все, что нам понадобится на данном этапе.
Шаг 2: Основные правила CSS
Перед тем, как заняться градиентами, закругленными углами и т.п., нужно позаботиться об основных правилах. Ничего особенного, обычный CSS2:Ul { list-style: none; }
a.button {
display: block;
float: left;
position: relative;
height: 25px;
width: 80px;
margin: 0 10px 18px 0;
text-decoration: none;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 25px;
text-align: center;
}
Теперь применим правила для различных цветов. Например, для серого. Все остальные цвета можно посмотреть в демо.
/* СЕРЫЙ */
.gray,
.gray:hover {
color: #555;
border-bottom: 4px solid #b2b1b1;
background: #eee;
.gray:hover { background: #e2e2e2; }
}
У вас должно получиться что-то вроде этого. Выглядит довольно-таки солидно, если на дворе 2008 г.
Шаг 3: Двойные рамки!
Если вы внимательно посмотрите на конечный результат, то увидите, что по периметру всей кнопки расположена тонкая линия. Для осуществления этого эффекта мы будем использовать псевдо-элементы :before и :after .a.button { display: block; float: left; position: relative; height: 25px; width: 80px; margin: 0 10px 18px 0; text-decoration: none; font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 25px; text-align: center; } a.button:before, a.button:after { content: ""; position: absolute; left: -1px; height: 25px; width: 80px; bottom: -1px; } a.button:before { height: 23px; bottom: -4px; border-top: 0; }
При добавлении цвета кнопки выглядят гораздо лучше.
/* СЕРЫЙ */ .gray, .gray:hover { color: #555; border-bottom: 4px solid #b2b1b1; background: #eee; } .gray:before, .gray:after { border: 1px solid #cbcbcb; border-bottom: 1px solid #a5a5a5; } .gray:hover { background: #e2e2e2; }
Шаг 4: Немного магии CSS3
Теперь приступим к непосредственной части CSS3. Начнем с закругленных углов:a.button { display: block; float: left; position: relative; height: 25px; width: 80px; margin: 0 10px 18px 0; text-decoration: none; font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 25px; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
Естественно элементы :before и :after так же нуждаются в закругленных углах.
a.button:before, a.button:after { content: ""; position: absolute; left: -1px; height: 25px; width: 80px; bottom: -1px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } a.button:before { height: 23px; bottom: -4px; border-top: 0; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; -webkit-box-shadow: 0 1px 1px 0px #bfbfbf; -moz-box-shadow: 0 1px 1px 0px #bfbfbf; box-shadow: 0 1px 1px 0px #bfbfbf; }
И наконец мы применим градиенты, внутренню тень и тень для текста. Чтобы избежать багов в IE6, добавим state:visited.
/* СЕРЫЙ */ a.gray, a.gray:hover, a.gray:visited { color: #555; border-bottom: 4px solid #b2b1b1; text-shadow: 0px 1px 0px #fafafa; background: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#e2e2e2)); background: -moz-linear-gradient(top, #eee, #e2e2e2); box-shadow: inset 1px 1px 0 #f5f5f5; } .gray:before, .gray:after { border: 1px solid #cbcbcb; border-bottom: 1px solid #a5a5a5; } .gray:hover { background: #e2e2e2; background: -webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#eee)); background: -moz-linear-gradient(top, #e2e2e2, #eee); }
Наш конечный результат, не так уж и плохо!
Шаг 5: Мы ничего не забыли?
В своем дизайне Orman так же предусмотрел состояние:active. Поэтому мы просто обязаны добавить его к нашему коду.Мы разместим эту часть кода под правилами для различных цветов.
/* ACTIVE STATE */ a.button:active { border: none; bottom: -4px; margin-bottom: 22px; -webkit-box-shadow: 0 1px 1px #fff; -moz-box-shadow: 0 1px 1px #fff; box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3); } a.button:active:before, a.button:active:after { border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
Вот, что у нас получится:
Шаг 6 (по желанию): Старые браузеры
Итак, мы создали приятные кнопки CSS3, которые работают во всех современных браузерах. Но как быть с Internet Explorer 8 и ниже. В этих браузерах нет поддержки ни теней для текста, ни градиентов.Для решения этой проблемы мы можем использовать javascript библиотеку Modernizr , которая может определять, поддерживает ли ваш браузер CSS3 и HTML5. Библиотека не исправляет проблемы, она лишь предлагает альтернативный стиль.
Во-первых, мы создадим собственную версию Modernizr, чтобы не таскать за собой огромный javascript. Это можно сделать на их веб-сайте . Как только мы вставили javascript в наш документ, необходимо определить правила разных классов для альтернативного стиля. Мы будем использовать изображения для тех браузеров, которые не поддерживают border-radius и градиенты.
/* MODERNIZR FALLBACK */ .no-cssgradients a.button, .no-cssgradients a.button:visited, .no-borderradius a.button, .no-borderradius a.button:visited, .no-generatedcontent a.button, .no-generatedcontent a.button:visited { background: url(images/sprite.png) no-repeat 0 0px; height: 32px; width: 82px; } .no-cssgradients a.button:hover, .no-borderradius a.button:hover, .no-generatedcontent a.button:hover { background: url(images/sprite.png) no-repeat 0 -32px; } .no-cssgradients a.button:active, .no-borderradius a.button:active, .no-generatedcontent a.button:active { background: url(images/sprite.png) no-repeat 0 -64px; bottom: 0; line-height: 35px; } .no-cssgradients a.gray, .no-cssgradients a.gray:visited, .no-cssgradients a.gray:hover { background-position-x: 0; } .no-cssgradients a.pink, .no-cssgradients a.pink:visited, .no-cssgradients a.pink:hover { background-position-x: -82px; } .no-cssgradients a.blue, .no-cssgradients a.blue:visited, .no-cssgradients a.blue:hover { background-position-x: -164px; } .no-cssgradients a.green, .no-cssgradients a.green:visited, .no-cssgradients a.green:hover { background-position-x: -246px; } .no-cssgradients a.turquoise, .no-cssgradients a.turquoise:visited, .no-cssgradients a.turquoise:hover { background-position-x: -328px; } .no-cssgradients a.black, .no-cssgradients a.black:visited, .no-cssgradients a.black:hover { background-position-x: -410px; } .no-cssgradients a.darkgray, .no-cssgradients a.darkgray:visited, .no-cssgradients a.darkgray:hover { background-position-x: -492px; } .no-cssgradients a.yellow, .no-cssgradients a.yellow:visited, .no-cssgradients a.yellow:hover { background-position-x: -574px; } .no-cssgradients a.purple, .no-cssgradients a.purple:visited, .no-cssgradients a.purple:hover { background-position-x: -656px; } .no-cssgradients a.darkblue, .no-cssgradients a.darkblue:visited, .no-cssgradients a.darkblue:hover { background-position-x: -738px; } .no-cssgradients a.button, .no-cssgradients a.button:visited, .no-cssgradients a.button:hover, .no-cssgradients a.button:before, .no-cssgradients a.button:after, .no-borderradius a.button, .no-borderradius a.button:visited, .no-borderradius a.button:hover, .no-borderradius a.button:before, .no-borderradius a.button:after, .no-generatedcontent a.button, .no-generatedcontent a.button:visited, .no-generatedcontent a.button:hover, .no-generatedcontent a.button:before, .no-generatedcontent a.button:after { border: 0; }
