TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

2 565

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

Источник записи:

Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. ПринимаюПодробнее