Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.
В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.
Код | Описание | Вид |
---|---|---|
div { border-radius: 10px; } | Радиус скругления для всех уголков сразу. | |
div { border-radius: 0 10px; } | Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего. | |
div { border-radius: 20px 10px 0; } | Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего. | |
div { border-radius: 20px 10px 5px 0; } | Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего. |
В примере 1 показано создание блока со скруглёнными уголками.
Пример 1. Уголки у блока
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Блок со скруглёнными уголками
Интересный эффект можно получить, если задать радиус скругления больше половины высоты и ширины элемента. В таком случае получится круг. В примере 2 показано создание круглой кнопки с рисунком.
Пример 2. Круглая кнопка
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Круглая кнопка
В браузере Opera скругление к
Свойство border-radius можно сочетать и с другими свойствами, например, добавить к элементу тень. В примере 3 сделан набор кружков, из которых один подсвечивается с помощью box-shadow . Такой набор можно использовать для навигации по страницам или по фотографиям.
Пример 3. Свечение
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 3.
Рис. 3. Свечение вокруг кружка
С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов. В примере 4 показано создание эллиптических уголков для добавления к фотографии надписи оформленной как в комиксах.
Пример 4. Эллипсы
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 4.
Рис. 4. Использование эллиптических уголков
Вид уголков можно изменить и у изображений, добавляя к селектору img свойство border-radius , как показано в примере 5.
Пример 5. Изображения
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Доброго времени суток, уважаемые читатели . В этот день мы будем создавать набор красивых иконок для сайта с помощью 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. Но мне кажется, что эта проблема скоро решится.
Мы рассмотрим каждый пример и разберем как выглядит их HTML-структура и стили для разных состояний кнопок.
Обратите внимание, что анимация/переходы будут работать только в браузерах, которые поддерживают эти CSS3-свойства.
Чтобы не захламлять код в уроке я не буду использовать префиксы для различных браузеров. Их вы сможете увидеть в архиве с примерами.
В этом примере мы создадим большую кнопку с несколькими элементами на ней. Она будет иметь иконку, основной текст, стрелку с правой стороны и цену, которая будет появляться только когда мы наводим курсор.
В этом примере мы попытаемся сделать что-то совершенно другое. Кнопка будет расширяться вниз при наведении и раскрывать еще одно сообщение. Значок стрелки будет слегка вращаться.
В этом примере мы будем использовать символьный шрифт для иконок. Идея заключается в создании следующего эффекта: при наведении мыши иконка исчезает и появляется движущаяся стрелка.
В этом примере мы создадим круглую кнопку со звездочкой в ней. Мы заставим звезду вращаться при наведении курсора (с небольшим импульсом) и сделаем появление дополнительного текста.
Мы сделаем кнопки круглыми и добавим необычные тени к ним. Для того, чтобы отцентрировать основной текст по вертикали, мы установим 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);}
}
В последнем примере мы создадим псевдо 3D-кнопку, использовав некоторые классные тени.
Здравствуйте, уважаемые друзья. Сегодня я расскажу про два способа, которые помогут вам создать анимированную кнопку для ваших сайтов. Вы наверняка, видели много таких кнопок и нажимали на них. Так вот, на своём блоге я периодически рекомендую партнёрские курсы и тренинги, только те, что испробовал сам. И разумеется я интересуюсь статистикой, а статистика говорит, что на привлекательные кнопки люди нажимают на 48% чаще, чем на обычные ссылки.
Принцип создания анимированных кнопок на CSS заключается в следующем, есть три положения. 1 — Исходное, 2 — при наведении курсора и 3 — при нажатии кнопки мышки. В каких-то сервисах есть все три положения, а в каких-то только два. Но главное, чтобы вас устраивал конечный результат.
Видеоурок по второму способу создания анимированных кнопок:
В качестве примера рассмотрим сервис CSS3 ButtonGenerator, в нём как раз всего два положения. Но эффекты смотрятся очень хорошо. Кого смущает отсутствие русского языка, используйте последний генератор, приведённый в списке.
Итак, начинаем.
Открываем главную страницу сервиса. Изначально перед вами будет предварительный вид кнопки и инструменты позволяющие сделать всевозможные настройки.
Первый раздел Text&Font, отвечает за текст, размер шрифта, цвет шрифта, тень шрифта. Именно здесь вы пишете надпись на кнопке, задаёте неё размер, цвет, и тень.
Следующий раздел Background, относится к фону. Здесь можно указать цвет кнопки, градиент кнопки, размер кнопки и смешение фона.
Раздел Border, отвечает за настройки тени и бордюров кнопки. Вы без труда сможете настроить толщину бордюра, закругление углов, и тень кнопки.
Следующий раздел Transform, отвечает за трансформацию кнопки, — это повороты, смещения, искажение.
Следующий раздел Transition, отвечает за плавность анимации. Данные настройки Вы устанавливаете в соответствие с Вашей кнопкой. Действия могут быть применены как ко всей кнопке, так и к отдельным слоям.
Попробовав, несколько раз, поэкспериментировать с настройками и вы поймете, что к чему.
После того как первоначальный вид кнопки настроен, можно переходить к следующему этапу. Это видоизменение кнопки при наведение курсора мышки. Для этого нажимаем на чекбокс, указанный на скриншоте.
Параметры при наведении курсора мышки
Теперь все изменения в настройках вы делаете для кнопки, которые будут отображаться при наведении курсора мыши. И эти настройки зависят индивидуально от каждой кнопки. В качестве примера я изменил настройки поворота, градиента и цвета тени.
Когда готова кнопка, можно переходить к установке кнопки в статью. Для этого в нужном мести статьи устанавливаем код:
Вот наш пример:
Ну что же, теперь вы знаете, как легко и достаточно быстро сделать анимированную кнопку для сайта или блога. Пробуйте и внедряйте, это того стоит. Если будут вопросы пишите в комментариях, постараюсь помощь.
На этом сегодня всё, желаю Вам удачи. И всегда рад видеть на страницах своего блога.
P.S. А вот пример анимированной кнопки на тренинг Дениса Герасимова «Настройка холодного трафика для продвижения партнёрских ссылок». Я прошёл этот тренинг и рекомендую его всем — это без лишнего преувеличения, реальный способ заработка на партнёрских программах. Чем я в принципе и занимаюсь.
Накидал тут эскизик как я вижу кнопку Демо. Идея тут в следующем, сделать кнопку как бы из двух частей, она должна быть анимированной, при наведении раскрываться вторая часть, вытягивая за собой внутренний блок, где находится надпись, а в момент убирания курсора все должно вернуться в исходное положение.
Имея эскиз перед глазами можно уже представить, как это реализовать на 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 файл 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; }Основной каркас кнопки у нас готов, осталось ее анимировать и придать ей красивое оформление.
В основном кнопка готова и приступим к ее анимированию, напишу комментарий, откуда будем писать стили. Первым делом описываем действия при наведении на кнопку.
/* 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; }
Мы сделали полноценную анимированную кнопку и теперь можно ей придать более красивый вид.
После того как мы провели все работа по ее свойствам, позицианированию и анимации, приступим к ее оформлению. Поменяем у кнопки общий стиль, добавим 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; }
Получалась довольно эффектная кнопка, которую легко можно модифицировать и оформить под свои задачи. Рекомендую заменить общее ее оформление, сделайте свои присетты, поэкспериментируйте с различными вариантами градиентов, возможно, вы придумаете более оригинальные способы анимации и обязательно поделитесь с ними в комментариях.
Всем кому понравился материал обязательно поделитесь им с друзьями.