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; что бы этот блок был выше остальных.

Блоку с текстом сделаем отступы с лева и сверху по 5 пик.

А блок с картинкой .b-img делаем отступ с левой стороны в 140 пик. , и сверху задаем в 0. Тут же закруглим углы с правой стороны в 10 пик.

И тоже проделаем с левым блоком.

Затем нам нужно сделать два псевдоэлемента, это те самые уголки, которые расположены на их соединении.

Отбираем правый блок и присваиваем ему псевдоэлемент :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 рисуем треугольник. Абсолютно позиционируем, и выравниваем его по левому краю.

Основной каркас кнопки у нас готов, осталось ее анимировать и придать ей красивое оформление.

Анимация кнопки в 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 сек.

Затем анимируем эффект вращения иконки при помощи 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 */ }

У псевдоэлемента прописываем красный цвет под фон ингридиента кнопки.

Заменим у ссылок цвет с темного на белый.

Dws-button a{ text-decoration: none; color: #ffffff; }

Придадим тексту тень, для этого допишем в классе .b-demo text-shadow: -1px -1px 1px #000000;

Внутренний блок сделаю в голубоватом цвете.

Сразу меняем цвет у псевдоэлемента :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; }

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

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

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

Свойство 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 , но просто их знать мало. Нужно обязательно практиковаться! И вот сегодня я покажу, .

Откроем файл index.html и создадим простенькую структуру

Ничего особенного. Просто 3 блока с классом .button Перейдём теперь к стилям.

Body {

}

Button {
display: inline-block;
margin: 40px;
width: 100px;
height: 100px;
background: url(http://subtlepatterns.com/patterns/extra_clean_paper.png);
cursor: pointer;
border-radius: 50%;

inset 0 2px 0 rgba(255,255,255,.6),
0 2px 0 rgba(0,0,0,.1),
inset 0 0 20px rgba(0,0,0,.1);
}

Фон для документа и наших кнопок я взял с сайта subtlepatterns.com .

Мы делаем наши div строчно-блочными, чтобы они выстроились по горизонтали, задаём им высоту, ширину, отступ от краёв браузера, скругление 50% , чтобы получить круг, и при наведении курсор делаем pointer . Здесь нет ничего сложного, но тень я не зря отделил в стилях, т.к. это именно та часть, которая может вызвать затруднения, хотя, там тоже всё просто, и это вы сейчас увидите.

Задав первую тень, мы уже увидим контур нашего круга:

Box-shadow: 0 3px 20px rgba(0,0,0,.25);

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

Box-shadow: 0 3px 20px rgba(0,0,0,.25),
inset 0 2px 0 rgba(255,255,255,.6);

Следующая внешняя тень нужна для того, чтобы немного затемнить место под кнопкой снизу, а следующая внутренняя затемняет пространство внутри кнопки для пущего эффекта)

Box-shadow: 0 3px 20px rgba(0,0,0,.25),
inset 0 2px 0 rgba(255,255,255,.6),
0 2px 0 rgba(0,0,0,.1),
inset 0 0 20px rgba(0,0,0,.1);

Как видите, по-началу кажется сложно, много свойств, но, если разобраться, то всё оказывается намного проще. Итак, вот наш конечный результат:

Теперь реализуем поведение при наведении на блок

Button:hover {
box-shadow: inset 0 0 20px rgba(0,0,0,.2),
0 2px 0 rgba(255,255,255,.4),
inset 0 2px 0 rgba(0,0,0,.1);
}

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

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

Btn-photo {
background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/MD-camera-photo_0.png) center center no-repeat;
}

Btn-settings {
background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/settings.png) center center no-repeat;
}

Btn-tag {
background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/tag.png) center center no-repeat;
}

Здесь мы просто добавляем второй фон для каждой кнопки, взяв иконки с сайта defaulticon.com .

Вот и всё. Сегодня мы рассмотрели, как создать круглые кнопки на CSS3 .