Верстаем круглые кнопки на CSS3.
Здравствуйте, дорогие читатели. Мы уже изучили многие свойства, которые появились в CSS3, но просто их знать мало. Нужно обязательно практиковаться! И вот сегодня я покажу, как создать круглые кнопки на CSS3.
Откроем файл index.html и создадим простенькую структуру
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>CSS3 Buttons</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</body>
</html>
Ничего особенного. Просто 3 блока с классом .button Перейдём теперь к стилям.
body {
background: url(http://subtlepatterns.com/patterns/extra_clean_paper.png);
}
.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%;
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);
}
Фон для документа и наших кнопок я взял с сайта 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
<div class="button btn-photo"></div>
<div class="button btn-settings"></div>
<div class="button btn-tag"></div>
Мы просто добавили дополнительный класс для каждой кнопки и теперь давайте зададим стили для них
.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.
-
Создано 05.05.2014 13:55:57
-
Михаил Русаков
Комментарии (5):
Симпатично и работает во всех основных браузерах
Ответить
в современных версиях - во всех. а так...старые версии ie не поддерживают border-radius
Ответить
opera квадрат показала, второй раз открыл - норм)
Ответить
Бывает
Ответить
Здравствуйте. Возник вопрос насчет адреса картинки. Такой код у меня отлично сработал: background: url(http://test.ru/image.jpeg); А вот такой нет: background: url(image.jpeg); Почему не сработал второй? Ведь картинка лежит в корне, а не в папке.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.