Как создать лучшую кнопку в CSS3

Я предпочитаю выбирать теги <button><input type="submit" /> Это может быть немного скучно …

Давайте создадим лучшую кнопку, используя стили CSS3, анимацию и преобразования:

Посмотреть кнопку демонстрации …

HTML

Здесь нет сюрпризов — нам нужен только один тег кнопки:

 <button>Click me!</button>

Мы собираемся применить наши стили к каждой кнопке, но, если вы не хотите этого делать, добавьте класс и нацеливайте его в CSS соответственно.

CSS

Наша кнопка должна хорошо работать в последних версиях браузеров, но при этом изящно ухудшаться в старых приложениях Тем не менее, я собираюсь добавлять префиксы CSS только тогда, когда они абсолютно необходимы. Firefox, Opera и IE10 поддерживают переходы, преобразования и анимацию без префиксов, но нам все еще требуется -webkit- для Chrome и Safari.

Давайте начнем с некоторых основных стилей для форматирования кнопки:

 button
{
	display: block;
	font-size: 1.1em;
	font-weight: bold;
	text-transform: uppercase;
	padding: 10px 15px;
	margin: 20px auto;
	color: #ccc;
	background-color: #555;
	background: -webkit-linear-gradient(#888, #555);
	background: linear-gradient(#888, #555);
	border: 0 none;
	border-radius: 3px;
	text-shadow: 0 -1px 0 #000;
	box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
	cursor: pointer;

Ничего сложного. Я использовал довольно общий серый цвет, но вы можете применять любые цвета, которые вам нужны. Также обратите внимание, что background-color Я также установил курсор на указатель — я никогда не понимал, почему браузеры не делают этого по умолчанию?

Box-shadow — это самое интересное свойство: box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6) Это определяет край кнопки, 5px «глубину» и легкую тень вокруг нее.

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

 -webkit-transition: all 150ms ease;
	transition: all 150ms ease;
}

В следующем блоке мы определим стили наведения и фокусировки. Это определяет pulsate

 button:hover, button:focus
{
	-webkit-animation: pulsate 1.2s linear infinite;
	animation: pulsate 1.2s linear infinite;
}

@-webkit-keyframes pulsate
{
	0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
	50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
	100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}
		
@keyframes pulsate
{
	0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
	50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
	100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

Firefox, Chrome и Safari не требуют определения 0% и 100%, но IE10 не может анимировать тени текста, если мы их не используем. Для меня это звучит как ошибка браузера — запомните это.

Наконец, мы устанавливаем активное состояние кнопки:

 button:active
{
	color: #fff;
	text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
	box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
	-webkit-transform: translateY(3px);
	transform: translateY(3px);
	-webkit-animation: none;
	animation: none;
}

Это выполняет ряд действий:

• анимация выключена, и текст переведен в состояние «полностью светящийся»
• кнопка сдвинута на 3 пикселя с помощью translateY
• box-shadow Поэтому он был уменьшен с 5px до 2px, но при переводе 3px создается впечатление, что кнопка утопила в страницу.
• внешняя тень также уменьшена, чтобы создать впечатление, что кнопка находится ниже.

Наша кнопка завершена:

Посмотреть кнопку демонстрации …

Код работает как положено во всех современных браузерах. Единственная проблема, которую я обнаружил, была в Opera — она ​​проигрывает пульсирующую анимацию только один раз? Но они скоро переходят на WebKit , так что давайте не будем сильно беспокоиться…

Пожалуйста, используйте код, как вам нравится!