Здравствуйте уважаемые друзья! С вами снова на связи Заур Магомедов. В данной небольшой статье хочу показать, как можно сделать кнопку анимированной при возникновения определенного события, например, отправка формы на Ajax, причем на чистом CSS, без использования картинок и скриптов.
Сначала посмотрите демо, как это смотрится…
Демо — Анимированная кнопка для формы на CSS
21933
Для анимации будем использовать правило в CSS — animation.
Код HTML:
<div id="main-container"> <div class="btn-block-wrapper"> <h2>Обычное состояние кнопки</h2> <a href="#" class="btn">Отправить</a> <h2>Состояние кнопки при отправке</h2> <a href="#" class="btn sending">Отправка...</a> </div> </div>
Код CSS (здесь я привел код только кнопки):
/** Код кнопки **/ /* Обычное состояние */ .btn { background-color: #496cae; color: #fff; cursor: pointer; display: inline-block; padding: 0 30px; margin-bottom: 30px; font: bold 13px/50px Arial, sans-serif; text-align: center; text-decoration: none; text-transform: uppercase; -webkit-transition: background-color .3s ease; -moz-transition: background-color .3s ease; -o-transition: background-color .3s ease; transition: background-color .3s ease; height: 50px; width: 100% } .btn:last-child { margin-bottom: 0 } .btn:hover { background-color: #2D4F8E; -webkit-transition: background-color .3s ease; -moz-transition: background-color .3s ease; -o-transition: background-color .3s ease; transition: background-color .3s ease; } /* Кнопка при отправке */ .btn.sending { -webkit-animation: barberpole 0.5s linear infinite; -moz-animation: barberpole 0.5s linear infinite; -o-animation: barberpole 0.5s linear infinite; animation: barberpole 0.5s linear infinite; -moz-background-size: 30px 30px; -o-background-size: 30px 30px; background-size: 30px 30px; background-color: #2B54A1; background-image: -webkit-linear-gradient(45deg, rgba(73, 108, 174, 0.5) 25%, transparent 25%, transparent 50%, rgba(73, 108, 174, 0.5) 50%, rgba(73, 108, 174, 0.5) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(73, 108, 174, 0.5) 25%, transparent 25%, transparent 50%, rgba(73, 108, 174, 0.5) 50%, rgba(73, 108, 174, 0.5) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(73, 108, 174, 0.5) 25%, transparent 25%, transparent 50%, rgba(73, 108, 174, 0.5) 50%, rgba(73, 108, 174, 0.5) 75%, transparent 75%, transparent); background-image: linear-gradient( 45deg, rgba(73, 108, 174, 0.5) 25%, transparent 25%, transparent 50%, rgba(73, 108, 174, 0.5) 50%, rgba(73, 108, 174, 0.5) 75%, transparent 75%, transparent); } @-webkit-keyframes barberpole { from { background-position: 0 0; } to { background-position: 60px 30px; } } @-moz-keyframes barberpole { from { background-position: 0 0; } to { background-position: 60px 30px; } } @-o-keyframes barberpole { from { background-position: 0 0; } to { background-position: 60px 30px; } } @keyframes barberpole { from { background-position: 0 0; } to { background-position: 60px 30px; } } /** Конец кода кнопки **/
Анимация у кнопки появляется, если вы заметили при появлении дополнительного класса — sending. Конечно, если вы будете прикручивать данную кнопку к своей форме, то постарайтесь, чтобы при отправке кнопке назначался данный класс.
В свое время, когда я задумал сделать анимацию кнопке при отправке формы на Ajax я искал в сети именно гиф-картинку. Потом подумал — ведь это можно сделать и на CSS. Сегодня на CSS можно сделать много чего… В общем, это тема уже для отдельной статьи. А на этом сегодня все.
Будут вопросы — задавайте в комментариях. До встречи в следующих постах.