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

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

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

Заур Магомедов
Главная » Верстка Html5, Css3 » Анимированная кнопка для формы на чистом CSS

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

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

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

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

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

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

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

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

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

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

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

Система Orphus

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

  • Владислав Авг 03, 2018 в 21:29

    Добрый вечер. Возникла такая проблема, подскажите пожалуйста.
    Прописываю backgraund через nth-child а картинка подставляется первая ко всем трём, почему то nth-child не срабатывает, не подставляет картинку 2 к блоку 2 и 3 к 3. В чем ошибка?
    Спасибо.

    <header id="top-header">
    <div class="homm-slider">
    			<div class="item">
    				<div class="line">
    					<div class="wrapper">
    					<div class="bg">
    					<div class="title">
    						Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    					</div>
    					<div class="description">
    						Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    					</div>
    					</div>
    					<div class="batton">
    						<a href="#" class="hvr-bounce-to-right">Кнопка</a>
    						<a href="#" class="dva hvr-bounce-to-right">Кнопка</a>
    					</div>
    					</div>
    				</div>
    			</div>
    			<div class="item">
    				<div class="line">
    					<div class="wrapper">
    					<div class="bg">
    					<div class="title">
    						Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    					</div>
    					<div class="description">
    						Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    					</div>
    					</div>
    					<div class="batton">
    						<a href="#" class="hvr-bounce-to-right">Кнопка</a>
    						<a href="#" class="dva hvr-bounce-to-right">Кнопка</a>
    					</div>
    					</div>
    				</div>
    			</div>
    			<div class="item">
    				<div class="line">
    					<div class="wrapper">
    					<div class="bg">
    					<div class="title">
    						Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    					</div>
    					<div class="description">
    						Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    					</div>
    					</div>
    					<div class="batton">
    						<a href="#" class="hvr-bounce-to-right">Кнопка</a>
    						<a href="#" class="dva hvr-bounce-to-right">Кнопка</a>
    					</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</header>
    
     
    #top-header .homm-slider .item .line:nth-child(1) {
    	background: url(../images/home-slider/Slide-1.jpg) center center no-repeat;
    	padding: 133px 0;
        background-size: cover;
    }
    #top-header .homm-slider .item .line:nth-child(2) {
    	background: url(../images/home-slider/Slide-2.jpg) center center no-repeat;
    	padding: 133px 0;
        background-size: cover;
    }
    #top-header .homm-slider .item .line:nth-child(3) {
    	background: url(../images/home-slider/Slide-3.jpg) center center no-repeat;
    	padding: 133px 0;
        background-size: cover;
    }
    
    • Заур Магомедов
      Заур Магомедов Авг 04, 2018 в 0:59

      :nth-child нужно указывать не классу .line, а классу .item, примерно так:

      .item:nth-child() .line ...
      
      • Владислав Авг 04, 2018 в 13:34

        Прописал так, как вы показали, вторая и третья стали отображаться, а первая не отображается.

        #top-header .homm-slider .item:nth-child(1) .line {
        	background: url(../images/home-slider/Slide-1.jpg) center center no-repeat;
        	padding: 133px 0;
            background-size: cover;
        }
        #top-header .homm-slider .item:nth-child(2) .line {
        	background: url(../images/home-slider/Slide-2.jpg) center center no-repeat;
        	padding: 133px 0;
            background-size: cover;
        }
        #top-header .homm-slider .item:nth-child(3) .line {
        	background: url(../images/home-slider/Slide-3.jpg) center center no-repeat;
        	padding: 133px 0;
            background-size: cover;
        }
        
        • Заур Магомедов
          Заур Магомедов Авг 04, 2018 в 13:48

          Для первого и последнего элемента вы можете использовать :first-child и :Last-child соответственно.
          Background и background-size можно написать сокращенно:

          background: url(../images/home-slider/Slide-1.jpg) center center /cover no-repeat;
          • Владислав Авг 04, 2018 в 18:01

            Все равно не срабатывает, первая и третья картинка в слайдере не отображаются. Может проблема в слайдере, но когда было без nth-child подключалась первая картинка ко всем трем пунктам слайдера, значит работает. Может глюк.
            Я изначально делал так, в html прописывал img и делал так фон, но так картинка отображается не так как нужно, она почему то отображается в 100% и при уменьшении экрана она уменьшается, а мне нужно, чтобы она расползалась, как при background: url(…) center center /cover no-repeat хотя img я прописывал эти же center center /cover no-repeat
            Как сделать img, но чтобы стили к ней срабатывали center center /cover no-repeat, как к картинке подключенной через background?
            Замучил вас наверно)

            #top-header .homm-slider .item:first-child .line {
            	background: url(../images/home-slider/Slide-1.jpg) center center /cover no-repeat;
            	padding: 133px 0;
            }
            #top-header .homm-slider .item:nth-child(2) .line {
            	background: url(../images/home-slider/Slide-2.jpg) center center /cover no-repeat;
            	padding: 133px 0;
            }
            #top-header .homm-slider .item:last-child .line {
            	background: url(../images/home-slider/Slide-3.jpg) center center /cover no-repeat;
            	padding: 133px 0;
            }
            
            • Заур Магомедов
              Заур Магомедов Авг 05, 2018 в 1:59

              Чет не понял. Вы какой слайдер используете? Тут вы явно что-то не то делаете. В слайдер картинки через html обычно я вставляю, а не через bg в css.

              • Владислав Авг 05, 2018 в 12:47
                • Заур Магомедов
                  Заур Магомедов Авг 05, 2018 в 14:56

                  Знаю этот слайдер, хороший плагин. Картинки можно указать через img в html. Не знаю почему у вас не получается. Код надо смотреть.

  • Владислав Июл 22, 2018 в 20:00

    Добрый вечер. Подскажите в чем может быть ошибка.
    Учусь верстать, возникла такая проблема:
    сверстал форму на главной, задал внутренние padding в imput, все работает корректно, а создаю страницу контакты и делаю там другую форму, задал внутренние padding в imput, но padding почему то срабатывает не во внутрь, а во вне. Из за этого imput увеличивается, выходит за пределы обертки.
    Из за чего может быть такая ошибка? Спасибо

    • Заур Магомедов
      Заур Магомедов Июл 22, 2018 в 21:25

      Вечер добрый! Попробуйте задать инпуту правило box-sizing: border-box;

      • Владислав Июл 23, 2018 в 17:32

        Спасибо большое, помогло.

        • Заур Магомедов
          Заур Магомедов Июл 24, 2018 в 7:13

          Не за что…

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

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

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

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

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

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

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