Многие веб разработчики на сайте ставят мигающею кнопку для как можно большого привлечение внимание. И вот вашему вниманию один вариант одного дизайна под кнопку, которая красиво переливается заданными оттенками, где в самом начале поставлена шрифтовая иконка.
Где можно уже по самой фигуре определить тематический характер. Здесь при наведение не чего не будет меняться, ее работа это мигать, где скорость задается в прикрепленных стилях CSS.
Если не подключили шрифтовые кнопки, то прописываем в низ сайта стиль, чтоб работала на всем сайте, а также на заданной странице в HEAD, это в том случай, если вы ставите эту кнопку на отдельную страницу.
Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
HTML
Код
<a href="Ссылка на переход" id="pogunidanes-vinongenemas"><span><i class="fa fa-diamond"></i></span>Ключевое слово</a>
CSS
Код
@-webkit-keyframes rainbow {
0% {background: #91b710;}
50% {background: #141415}
100% {background: #91b710;}
}
@keyframes rainbow {
0% {background: #91b710;}
50% {background: #141415}
100% {background: #91b710;}
}
#pogunidanes-vinongenemas {
background: #a58b09;
line-height: 65px;
display: block;
height: 65px;
width: 423px;
padding-right: 18px;
font-size: 28px;
color: #f1eeee;
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: #141415;}
50% {background: #91b710}
100% {background: #141415;}
}
@keyframes rainbow1 {
0% {background: #141415;}
50% {background: #91b710;}
100% {background: #141415;}
}
#pogunidanes-vinongenemas span {
background: #0e1942;
display: block;
float: left;
margin-right: 15px;
text-align: center;
height: 65px;
width: 68px;
webkit-animation: rainbow1 2s linear 2s infinite;
animation: rainbow1 2s linear 2s infinite;
}
#pogunidanes-vinongenemas img {
vertical-align: middle;
margin-top: 10px;
}
Кнопка с элементом мигание на чистом CSS делается очень просто.
Демонстрация
