Скруглённые уголки. Как создать стильные кнопки на чистом CSS Круглая кнопка html

Здравствуйте, дорогие читатели. Мы уже изучили многие свойства, которые появились в CSS3 , но просто их знать мало. Нужно обязательно практиковаться! И вот сегодня я покажу, .

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

CSS3 Buttons

Ничего особенного. Просто 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 .

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

Кнопка