ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация загрузки кнопок при нажатии на CSS

Анимация загрузки кнопок при нажатии на CSS

Отличное решение на красивую анимацию, где при при нажатии производиться загрузочный процесс на самой кнопке, и все это при помощи HTML и CSS. Основная концепция пользовательского интерфейса, где будут задействованы индикаторы загрузки в вызвавшее их действие. В первую очередь предназначен для использования с формами, где он дает пользователям немедленную обратную связь после отправки, а не заставляет их задуматься, пока браузер делает свое дело.

На веб-странице замечательный дизайн пользовательского интерфейса, как вы можете видеть на изображение. Здесь безусловно нужно пройти на страницу с демонстрацией, и посмотреть полный эффект заданной кнопки. Что по стилистике или дизайну, то здесь получаете потрясающий стиль самого основание, где только используются некоторые эффекты CSS. Возможно, вы уже видели кнопку загрузки на некоторых веб-страницах или формах, которые создают кнопку загрузки. В основном этот стиль кнопок используются в формы входа в систему.

По умолчанию:

Кнопка сайта с анимацией

При клике на кнопку:

Выдвижная кнопка на CSS

Подключаем шрифтовые знаки:

Код

HTML

Код

<button class="mekalades">
  <i class="far fa-paper-plane"></i>
  <span class="avekstura">
  Скачать файл
  </span>
  <span class="progruzka-animate"></span>
  </button>

CSS

Код

.mekalades {
  background-image: linear-gradient(to right, #6118b1 0%, #5690f3 100%);
  border: 0px solid #35269a;
  border-radius: 35px;
  font-size: 1rem;
  font-weight: bold;
  color: #f9f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: all 0.25s ease;
  width: 214px;
  position: relative;
  height: 58px;
  overflow: hidden;
}
.mekalades:not(.progruzka):hover {
  box-shadow: 0px 2px 15px 0px #2575fc;
}
.mekalades:not(.progruzka):hover i {
  transform: translate(7px);
}
.mekalades i {
  font-size: 1.45rem;
  position: absolute;
  left: 0px;
  pointer-events: none;
  z-index: 10;
  background: inherit;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.25s ease;
}
.mekalades .avekstura{
  width:130px;
  display: block;
  position: absolute;
  left:60px;
  pointer-events: none;
  transition: all 0.25s ease;
}
.progruzka-animate{
  position:absolute;
  width:60px;
  height:60px;
  z-index:100;
  border-radius: 50%;
  top: 0;
  left:0px;
  display:flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: all 0.25s ease;
}
.progruzka-animate:after{
  content:'';
  width:44px;
  height:44px;
  border-radius: 50%;
  border:3px solid transparent;
  border-left: 3px solid #fff;
  animation:progruzka infinite 0.8s ease 0.05s;
  position:absolute;
}
.progruzka-animate:before{
  content:'';
  width:44px;
  height:44px;
  border-radius: 50%;
  border:3px solid transparent;
  border-left: 3px solid #fff;
  animation:progruzka infinite 0.8s linear;
  position:absolute;
  opacity: 0.6;
}
.mekalades.progruzka{
  width:60px;
}
.mekalades.progruzka i{
  transform:rotate(-90deg);
  padding-bottom: 4px;
  padding-left:3px;
}
.mekalades.progruzka .avekstura{
  transform:translate(-140px);
}
.mekalades.progruzka .progruzka-animate{
  opacity: 1;
}
@keyframes progruzka{
  0%{
  transform:rotate(0deg);
  }
  100%{
  transform:rotate(360deg);
  }
}

Код

document.querySelector('.mekalades').addEventListener('click', (evt) => {
  evt.target.classList.add('progruzka')
  setTimeout(() => {
  evt.target.classList.remove('progruzka')
  }, 3000);
})

Привлекайте внимание, что на многих тематических сайтах это очень важный аргумент, как красивая кнопка загрузки, которая создана только с помощью CSS и некоторого количества JS. Нужно заметить, что в нашем случай с анимационной кнопкой не нужно подключать библиотеки.

Демонстрация

30 Января 2021 Загрузок: 4 Просмотров: 2308 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0