Главная · Устройства · Делаем стильные кнопки. Скруглённые уголки Кнопка с круглой иконкой css

Делаем стильные кнопки. Скруглённые уголки Кнопка с круглой иконкой css

Прежде чем разбираться с кнопками, рассмотрим общие для всех них установки.

HTML

Для кнопок будет использоваться очень простой HTML код:

Подписаться

CSS

Также все кнопки будут иметь общие установки для текста надписи и отмену выделения ссылок:

ButtonText { font: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; } a { color: #fff; text-decoration: none; }

Обычно, пользователь ожидает достаточно мягкого эффекта при навдении курсора мыши на ссылку или кнопку. А в нашем случае кнопка меняет размер - она увеличивается, показывая дополнительное сообщение.

Основной код CSS

Для начала нам нужно только задать кнопке форму и цвет. Определяем высоту 28px и ширину 115px, добавляем поля и отступы, а также задаем кнопке светлую рамку.

#button1 { background: #6292c2; border: 2px solid #eee; height: 28px; width: 115px; margin: 50px 0 0 50px; padding: 0 0 0 7px; overflow: hidden; display: block; }

Эффекты CSS3

Некоторым людям нравится, когда простая кнопка сопровождается достаточно большим кодом CSS. В данном разделе приводятся дополнительные стили CSS3 для нашей кнопки. Вполне можно обойтись и без них, но они придают кнопке более современный вид.

Округляем углы рамки и добавляем градиент. Здесь используется небольшой трюк с темным градиентом, который взаимодействует с любым цветом фона.

/*Скругленные углы*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

Анимация CSS

Теперь установим переход CSS. Анимация будет использоваться для любых изменений свойств и длиться полсекунды.

Наведение курсора мыши

Осталось только добавить стиль для расширения кнопки при наведении курсора мыши на нее. Кнопка должна иметь ширину 230px для отображения всего сообщения.

#button1:hover { width: 230px; }

Простое изменение тональности цвета

Очень простой и популярный эффект CSS для кнопки. При наведении курсора мыши плавно меняется тональность фонового цвета.

Основной код CSS

Код CSS очень похож на предыдущий пример. Используется другой цвет фона и немного изменена форма. Также центрируется текст и установлена высота строки для кнопки, чтобы происходило вертикальное центрирование.

#button2 { background: #d11717; border: 2px solid #eee; height: 38px; width: 125px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 38px; }

Эффекты CSS3

Устанавливаем скругление углов, градиент для фона и дополнительную тень. С помощью rgba делаем тень черной и прозрачной.

/*Скругленные углы*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Тень*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

Анимация CSS

Анимация практически не отличается от предыдущего примера.

/*Переход*/ -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease;

Наведение курсора мыши

При наведении курсора мыши будет устанавливаться другой цвет фона. Попробуйте выбрать более светлый вариант цвета в Photoshop, чтобы получился отличный эффект.

#button2:hover { background-color: #ff3434; }

Данный эффект может получиться весьма впечатляющим в зависимости от выбора фонового изображения. В демонстрации используется невзрачный фон и эффект выглядит невзрачно. Попробуйте использовать другую картинку и может получиться ошеломляющий эффект.

Основной код CSS

Основная часть кода не отличается от предыдущих примеров. Обратите внимание на то, что мы используем фоновое изображение. Начальное положение фона установлено в "0 0". При наведении курсора положение сдвигается по вертикали.

#button3 { background: #d11717 url("bkg-1.jpg"); background-position: 0 0; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; height: 58px; width: 155px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 58px; }

Эффекты CSS3

В данном примере нет ничего особенного - скругленные углы и тени.

/*Скругленные углы*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Тень*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

Анимация CSS

Анимация для данного случая длится дольше, чтобы создать плавный и интересный эффект.

/*Переход*/ -webkit-transition: All 0.8s ease; -moz-transition: All 0.8s ease; -o-transition: All 0.8s ease; -ms-transition: All 0.8s ease; transition: All 0.8s ease;

Наведение курсора мыши

Теперь пришла пора сдвигать фоновое изображение. Начальное положение было "0 0". Устанавливаем второй параметр в значение 150px. Для сдвига по горизонтали требуется изменить первый параметр.

#button3:hover { background-position: 0px 150px; }

3D имитация нажатия кнопки

Последний пример в нашем уроке посвящен популярному методу 3D имитации нажатия кнопки при наведении на нее курсора мыши. Анимация для данного случая настолько проста, что даже не требуется задавать переход CSS. Но конечный результат получается вполне впечатляющим.

Основной код CSS

Код CSS для нашей кнопки.

#button4 { background: #5c5c5c; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; height: 58px; width: 155px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 58px; }

Эффекты CSS3

В данном случае CSS3 перестает быть приятным опционом. Для получения эффекта требуются тени и градиент. Резкая тень создает видимость 3D кнопки.

/*Скругленные углы*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Тень*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

Наведение курсора мыши

В данном случае мы имеем самую большую секцию hover . Длина тени уменьшается, и с помощью полей создается смешение темной зоны. Все вместе создает иллюзию нажатия кнопки. Переворот градиента усиливает эффект.

#button4:hover { margin-top: 52px; /*Тень*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Градиент*/ background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); }

  • Перевод

Здравствуй, дорогой хабрадруг! Сегодня мы научимся создавать объемные кнопки CSS3! Они основаны на популярной PSD фриби от Orman Clark для его веб-сайта Premium Pixels. Мы постараемся создать копию этих кнопок с помощью CSS с минимальным количеством кода HTML.

Шаг 1: Создаем документ HTML

Мы начнем с создания нового документа HTML. Он будет основан на HTML5 boilerplate для того, чтобы у нас была удобная отправная точка. Теперь мы добавим список с ссылками. Вот в принципе и все, спасибо CSS3 за то, что мы не должны использовать дополнительные дивы и спаны.
Каждому пункту списка мы присвоим класс ‘buttons’. И так как Orman использовал различные цвета, мы назначим каждой кнопке свой собственный цвет в виде класса.

  • Download
  • Download
  • Download
  • Download
  • Download
  • Download
  • Download
  • Download
  • Download
  • Download

Это все, что нам понадобится на данном этапе.

Шаг 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; }

Заключение

Таким образом, у нас получились симпатичные кросс-браузерные кнопки CSS3. Возможно, вам покажется, что здесь слишком много кода для 10 кнопок, но это всего лишь демонстрация того, что CSS3 может или не может. Вы можете делать с этим что угодно! Надеюсь, мой урок был полезен, спасибо за внимание!

Мы рассмотрим каждый пример и разберем как выглядит их HTML-структура и стили для разных состояний кнопок.

Обратите внимание, что анимация/переходы будут работать только в браузерах, которые поддерживают эти CSS3-свойства.

Чтобы не захламлять код в уроке я не буду использовать префиксы для различных браузеров. Их вы сможете увидеть в архиве с примерами.

Пример 1

В этом примере мы создадим большую кнопку с несколькими элементами на ней. Она будет иметь иконку, основной текст, стрелку с правой стороны и цену, которая будет появляться только когда мы наводим курсор.

HTML-разметка
Структура довольно проста: иконка изображения и другие элементы в тегах span:
$29 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 Get a promotion
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 Windows Vista / Windows 7
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 Добавить метки

Накидал тут эскизик как я вижу кнопку Демо. Идея тут в следующем, сделать кнопку как бы из двух частей, она должна быть анимированной, при наведении раскрываться вторая часть, вытягивая за собой внутренний блок, где находится надпись, а в момент убирания курсора все должно вернуться в исходное положение.

  • в уроке задействуем основные стили как:
  • псевдоэлементами :before , :after ;
  • при помощи position с позиционируем блоки
  • псевдоклассами :hover , :activ определим стили при наведении и клику мышки
  • и сделаем плавную анимацию при помощи transition, transform


HTML структура кнопки

Имея эскиз перед глазами можно уже представить, как это реализовать на CSS. Нам понадобится основной блок, где будет помещены все элементы кнопки, это будет ее оберткой. Затем у кнопки будет внутренняя часть, которая выезжать при неведении мышки, внутри будем располагать текст «Смотреть пример». Затем идет левая и правая часть кнопки, между ними расположим псевдоэлементы треугольной формы. Да и чуть не забыл, картинка в виде стрелочек. Все это нам нужно будет анимировать, и придать кнопки определенную текстуру.


Открываем свою среду разработки, в моем случае я использую PhpStorm , создам в ней index.html , пропишу название «Button DEMO animation CSS ». Создаем

, в нем располагаем блок div , с классом.dws-button, (это будет нашей оберткой для кнопки). В обертке расположим ссылку, в которой поместим три блока, div с классом .b-demo (это левая часть кнопки), за ней идет div с классом .b-text (это внутренний блок который выезжать с надписью) и завершающий блок div с классом .b-img как вы догадались это правая сторона и в ней расположим картинка.

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; .

.dws-button{ font-family: Cuprum, Arial, Verdana, sans-serif; width: 250px; height: 70px; margin: 250px auto; outline: 1px solid #faa21a; position: relative; } .b-demo, .b-text, .b-img{ 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-text{ background: #3e3f3e; color: #ffffff; font-size: 24px; width: 150px; line-height: 20px; text-align: center; padding: 10px 0 10px 10px; left: 5px; top: 5px; }

А блок с картинкой .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, .b-text, .b-img, .b-demo:before{ position: absolute; }

И выравниваем таким образом, что бы он встал в конце блока.

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

.b-img:after{ content: ""; width: 0; height: 0; border-top: 35px solid transparent; border-left: 10px solid #29b8e5; border-bottom: 35px solid transparent; top: 0; left: 0; }

Заменим картинку, в место черной установим белую, в начале урока я их закачивал две штуки, прописываем вторую иконку.

И завершающем этапом, опишем стили при клике мышки

Пропишу тут соответствующий комментарий, затем под ним отбираем два блока с псевдоклассом :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; }


Получалась довольно эффектная кнопка, которую легко можно модифицировать и оформить под свои задачи. Рекомендую заменить общее ее оформление, сделайте свои присетты, поэкспериментируйте с различными вариантами градиентов, возможно, вы придумаете более оригинальные способы анимации и обязательно поделитесь с ними в комментариях.

Всем кому понравился материал обязательно поделитесь им с друзьями.

Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство 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 скругление к