Анимированная кнопка для формы на чистом CSS

Анимированная кнопка для формы на чистом CSS

5 152 в Html5, Css3 13

Здравствуйте уважаемые друзья! С вами снова на связи Заур Магомедов. В данной небольшой статье хочу показать, как можно сделать кнопку анимированной при возникновения определенного события, например, отправка формы на 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 можно сделать много чего… В общем, это тема уже для отдельной статьи. А на этом сегодня все.

Будут вопросы — задавайте в комментариях. До встречи в следующих постах.

Оцените пост
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (1 оценок, среднее: 5,00 из 5)
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, JavaScript, Vue, Git, БЭМ, Gulp.
Другие материалы той же категории