< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » Приятные полезности для сайта » Анимированная кнопка для формы на чистом CSS

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

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

Пост был обновлен: Апр 18, 2016

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

Читайте также:  Вертикально-выпадающее меню аккордеон для Joomla 2.5.x - 3.x.x

В свое время, когда я задумал сделать анимацию кнопке при отправке формы на Ajax я искал в сети именно гиф-картинку. Потом подумал — ведь это можно сделать и на CSS. Сегодня на CSS можно сделать много чего… В общем, это тема уже для отдельной статьи. А на этом сегодня все.

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

Пост был обновлен: Апр 18, 2016

Заур Магомедов
Заур Магомедов

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (1 оценок, среднее: 5,00 из 5)
Загрузка...

Проверка орфографии

Система Orphus

1 комментарий к статье "Анимированная кнопка для формы на чистом CSS"

  • Зенков Андрей Янв 04, 2017 в 15:19

    Кнопка, конечно, необходимая. Анимированная даже эффектнее выглядит, и предотвращает нажатие на неё по несколько раз обычным пользователем. Когда идут полоски, как своеобразная бегущая строка, юзер понимает, что система приняла его клик и остаётся только подождать. Уверен, на сайтах нужна такая кнопка, особенно в разделе комментариев

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]