Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Круглые кнопки на CSS Категория: CSS
Название: Круглые кнопки на CSS
Дата добавления: 22-04-2012
Раз просмотрено: 1644
Комментарии: 1
Рейтинг: * * * * * · · · · · (3 голоса)

Круглые кнопки на CSS

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

HTML

Разметка для этой круглой кнопки максимально проста — она представляет собой всего лишь ссылку с классом button:

<a href="#" class="button">Стоп</a>

CSS

Для создания круглых кнопок на CSS, вам необходимо прописать следующие CSS правила на вашей странице:

.button {
	font-family: Arial, Helvetica, sans-serif;
	-webkit-transform: rotateX(35deg);
	position: relative;
	display: inline-block;
	width: 100px;
	padding: 42px 15px;
	margin: 0 10px;
	background-color: #C91826;
	color: #FFF;
	font-weight: bold;
	font-size: 40px;
	text-decoration: none;
	text-align: center;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.5);

	border: 1px solid;
	border-color: #B21522;
	border-radius: 78px;
	-moz-border-radius: 78px;
	-webkit-border-radius: 78px;

	box-shadow: inset 0 -4px 5px rgba(255,255,255,0.2), inset 0px 1px 5px rgba(255,255,255,0.2), 0px 12px 0px #231F20, 0px 14px 0px #231F20, 0px 16px 0px #231F20, 0px 8px 5px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 0px -4px 5px rgba(255,255,255,0.2), inset 0px 1px 5px rgba(255,255,255,0.2), 0px 12px 0px #231F20, 0px 14px 0px #231F20, 0px 16px 0px #231F20, 0px 8px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: inset 5px -4px 5px rgba(255,255,255,0.2), inset 5px 1px 5px rgba(255,255,255,0.2), 0px 12px 0px #231F20, 0px 14px 0px #231F20, 0px 16px 0px #231F20;
}

.button:hover {
	background-color: #B21522;
	color: #E3E3E3;
}

.button:active {
	top: 8px;
	box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4), inset 0px -1px 5px rgba(255,255,255,0.2), 0px 8px 0px #231F20, 0px 9px 5px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4), inset 0px -1px 5px rgba(255,255,255,0.2), 0px 8px 0px #231F20, 0px 9px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4), inset 0px -1px 5px rgba(255,255,255,0.2), 0px 8px 0px #231F20, 0px 9px 5px rgba(0,0,0,0.5);
}

Если вы просмотрели этот CSS код, то, наверное, увидели, что мы используем свойство -webkit-transform. А это значит что в браузерах Google Chrome и Safari, использующих движок WebKit, наши круглые кнопки будут выглядеть немного иначе чем в других браузерах. При том, что в остальных браузерах кнопка будет выглядеть отлично, предпочтительным видом является вид в браузерах, использующих движок WebKit:

Круглые кнопки в браузерах Google Chrome и Safari
Круглые кнопки в браузерах Google Chrome и Safari

В остальных браузерах, кнопки будут выглядеть так:

Круглые кнопки в остальных браузерах
Круглые кнопки в остальных браузерах

Это интересно: «CSS градиент текста».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:
freebit  •  2012-04-29 21:52:50
Благодарю вас. Подумал вдруг о круглой кнопке, спросил у гугловской коробки, и сразу встретил этот код, подумал: "Вот оно, лежит и ждет".