Уверен что многие из Вас мои уважаемые читатели, наблюдали на многих сайтах разного рода кнопки привлекающие внимание. Такие кнопки называют “Кнопка действия”. Данные кнопки создаются для того что бы привлечь внимание пользователя сайта, и побудить в коре его головного мозга желание нажать на данную кнопку. Ниже Вашему вниманию предоставлен HTML код и CSS стили кнопки которую я чаще всего вставляю на сайты для привлечения внимания пользователей.
HTML верстка кнопки
<input type="submit" name="submit" value="Получить билет!"
style="background: green;"
class="Animated_button">
CSS стили кнопки
/* ----- Animated button ----- */
.Animated_button {
-moz-animation: cycle 4s linear infinite;
-webkit-animation: cycle 4s linear infinite;
}
@-moz-keyframes cycle {
35% {transform: rotate(0) translate(0, 0);}
40% {transform: rotate(5deg) translate(0, -2px);}
45% {transform: rotate(-3deg) translate(0, -2px);}
50% {transform: rotate(5deg) translate(0, -2px);}
55% {transform: rotate(-3deg) translate(0, -2px);}
60% {transform: rotate(5deg) translate(0, -2px);}
65% {transform: rotate(-3deg) translate(0, -2px);}
70% {transform: rotate(0) translate(0, 0);}
}
@-webkit-keyframes cycle {
35% {transform: rotate(0) translate(0, 0);}
40% {transform: rotate(5deg) translate(0, -2px);}
45% {transform: rotate(-3deg) translate(0, -2px);}
50% {transform: rotate(5deg) translate(0, -2px);}
55% {transform: rotate(-3deg) translate(0, -2px);}
60% {transform: rotate(5deg) translate(0, -2px);}
65% {transform: rotate(-3deg) translate(0, -2px);}
70% {transform: rotate(0) translate(0, 0);}
}
/* ----- Animated button END ----- */