0
346
2019-01-13

CSS - Как создать анимированную "дёргающуюся" кнопку

В данном посте я покажу как можно создать кнопку, которая будет привлекать внимание пользователей сайта за счет приятной глазу анимации "подергивания".
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Уверен что многие из Вас мои уважаемые читатели, наблюдали на многих сайтах разного рода кнопки привлекающие внимание. Такие кнопки называют "Кнопка действия". Данные кнопки создаются для того что бы привлечь внимание пользователя сайта, и побудить в коре его головного мозга желание нажать на данную кнопку. Ниже Вашему вниманию предоставлен 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 ----- */

CodePen