Эффекты при нажатии 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

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

jQuery(($) => {
    $('.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);
    });
});

Результат:

Добавим эффекты на чистом JavaScript

Нативный JavaScript будет следующий.

document.addEventListener("DOMContentLoaded", () => {

    document.querySelectorAll('.beautiEff .mybutton').forEach(function(el){

        el.addEventListener('click', function(){
            el.classList.add('mybutton--click'), setTimeout(function() {
                el.classList.remove('mybutton--click');
            }, 600);
        });
    });
});

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

admin