Эффекты при нажатии CSS

Рассмотрим, как добавить красивые эффекты при нажатии на кнопку с помощью CSS и jQuery

Создадим три кнопки с разными эффектами. Структура:

<button class="mybutton mybutton--animate-click-one">
  <span class="mybutton__text">Первый эффект при нажатии</span>
</button>

<button class="mybutton mybutton--animate-click-two">
  <span class="mybutton__text">Второй эффект при нажатии</span>
</button>

<button class="mybutton mybutton--animate-click-three">
  <span class="mybutton__text">Третий эффект при нажатии</span>
</button>

Общие стили

.mybutton {
  position: relative;
  margin-right: 20px;
  padding: 4px 14px;
  border: 1px solid lightgreen;
  background: none;
  color: #286aab;
  overflow: visible;
  cursor: pointer;
}
.mybutton::after {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -35px 0 0 -35px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  content: '';
  opacity: 0;
}

Стили для первой кнопки

.mybutton--animate-click-one::after {
  box-shadow: inset 0 0 0 35px rgba(111,148,182,0);
}
.mybutton--animate-click-one.mybutton--click::after {
  animation: anim-animate-click-one 0.6s ease-out forwards;
}
@keyframes anim-animate-click-one {
  0% {
    opacity: 1;
    transform: scale3d(0.4, 0.4, 1);
  }
  80% {
    box-shadow: inset 0 0 0 2px lightgreen;
    opacity: 0.1;
  }
  100% {
    box-shadow: inset 0 0 0 2px lightgreen;
    opacity: 0;
    transform: scale3d(1.2, 1.2, 1);
  }
}

Для анимации второй кнопки

.mybutton--animate-click-two::after {
  box-shadow: 0 0 0 3px rgba(111,148,182,0.05);
}
.mybutton--animate-click-two.mybutton--click::after {
  animation: anim-animate-click-two 0.5s ease-out forwards;
}
@keyframes anim-animate-click-two {
  0% {
    box-shadow: 0 0 0 3px lightgreen;
    opacity: 1;
    transform: scale3d(0.6, 0.6, 1);
  }
  100% {
    box-shadow: 0 0 0 100px rgb(110, 180, 110);
    opacity: 0;
    transform: scale3d(1, 1, 1);
  }
}

Эффекты для третьей кнопки

.mybutton--animate-click-three::after {
  background: lightgreen;
}
.mybutton--animate-click-three.mybutton--click::after {
  animation: anim-nimate-click-three 0.5s forwards;
}
@keyframes anim-nimate-click-three {
  0% {
    opacity: 1;
    transform: scale3d(0.1, 0.1, 1);
  }
  100% {
    opacity: 0;
    transform: scale3d(8, 8, 1);
  }
}

Будьте внимательны, должен быть подключен jQuery

Добавление и удаление класса для появления анимации при нажатии на кнопку

$(function(){
  $('.mybutton--animate-click-one, .mybutton--animate-click-two, .mybutton--animate-click-three')
    .click(function(){
      return _this = this,
      $(_this).stop().addClass('mybutton--click'), setTimeout(function() {
        $(_this).removeClass('mybutton--click');
      }, 600);
  });
});

Результат:

20/09/2019 12:48

Полезные ссылки

admin
20/09/2019 12:48