Мигающая кнопка на чистом CSS

Как привлечь внимание посетителя к какому-либо элементу/блоку/ссылке/рекламе на своем сайте? Как обычно — заставить ее мигать или дергаться, в общем как-то анимировать. Но как быть, если не хочется перегружать свой сайт излишними скриптами и анимированными картинками (гифками)? Тогда на помощь приходит CSS. Мигающая кнопка на чистом CSS делается очень просто.

В данной статье предлагаю разобрать самый простой вариант создания мигающей кнопки с помощью средств CSS.

Как это работает?

Для примера представим, что у нас есть сайт ресторана, и, для осуществления заказа/бронирования столиков, на его страницах размещена кнопка «Заказать стол».

<a href="#" id="stolik"><span><img src="/images/stolik.png" /></span>Заказать стол</a>

В нашем случае — это обычная ссылка, с картинкой внутри. Картинка имеет прозрачный фон и обернута в span, т.к. саму картинку мы не сможем заставить мигать, а вот span не составит труда.

Пришло время добавить некоторые стили оформления самой кнопки, а также заставим её мигать:

@-webkit-keyframes rainbow {
	0% {background: #a6ce20;}
	50% {background: #000}
	100% {background: #a6ce20;}
}

@keyframes rainbow {
	0% {background: #a6ce20;}
	50% {background: #000}
	100% {background: #a6ce20;}
} 

#stolik {
	background: #a6ce20;
	line-height: 70px;
	display: block;
	height: 70px;
	width: 400px;
	padding-right: 25px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 32px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	margin: 0px auto;
	webkit-animation: rainbow 2s linear 2s infinite;
	animation: rainbow 2s linear 2s infinite;
}

@-webkit-keyframes rainbow1 {
	0% {background: #000;}
	50% {background: #a6ce20}
	100% {background: #000;} 
} 

@keyframes rainbow1 {
	0% {background: #000;}
	50% {background: #a6ce20}
	100% {background: #000;} 
} 

#stolik span {
	background: #000;
	display: block;
	float: left;
	margin-right: 25px;
	text-align: center;
	height: 70px;
	width: 70px;
	webkit-animation: rainbow1 2s linear 2s infinite;
	animation: rainbow1 2s linear 2s infinite;
}

#stolik img {
	vertical-align: middle;
	margin-top: 8px;
}

Здесь необходимо обратить внимание на свойство animation у элементов #stolik и span, в которых мы вызываем правило @keyframes (для каждого свой, соответственно). В правилах @keyframes мы указываем ключевые кадры смены цвета элементов, в то время как animation запускает эти кадры.

В зависимости от заданных цветов и скорости анимации будет создан эффект мигания. В примере задано 2 цвета, Вы же можете указать сколько угодно цветов, задав при этом проценты, на которых этот цвет будет достигаться.

В итоге у нас получается простая анимация мигания кнопки, которую можно просмотреть перейдя по ссылке ниже.