Рабочий пример кнопки:

Нажми меня

К сожалению, сделать это средствами только CSS нельзя, поэтому придется использовать JavaScript. Для тех, кто еще с ним не знаком — это отличный повод начать, я дам исчерпывающие комментарии по работе скрипта. Он маленький и простой, но я по себе знаю, как пугает эта «магия», пока в ней не разберешься.

Общий принцип работы эффекта такой:

  • при загрузке страницы добавляем обработчик событий на кнопку
  • при клике добавляем кнопке определенный класс, который удаляем через N времени
  • у этого класса задаем CSS анимацию с необходимыми эффектами

Давайте разберем на конкретном примере.

Сначала создайте простой каркас страницы с кнопкой: 

<div class="main">
<div class="button">BUTTON</div>
</div>

Теперь зададим базовые стили для страницы и кнопки (они необязательны, это для красоты примера). 

/* Убираем отстыпы по умолчанию */
body, html {
    margin: 0;
    padding: 0;
}

.main {
    /* Задаем высоту и стили общего блока */
    height: 400px;
    background-color: #f5f5f5;
    /* Выравниваем кнопку по центру */
    display: flex;
    justify-content: center;
    align-items: center;
}

.button {
    background-color: #000;
    color: #fff;
    padding: .75em 1.5em;
    cursor: pointer;
    transition: box-shadow 200ms linear;
}

.button:hover {
    box-shadow: 0 .5em 1em 0 rgba(0, 0, 0, 0.15), 0 .4em .5em -.4em rgba(0, 0, 0, 0.4);
}

А вот обязательный CSS — сам эффект при нажатии. 

.button {
    position: relative;
}

.button:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -40px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    opacity: 0;
    box-shadow: inset 0 0 0 35px rgba(0,0,0,0.1);
    display: none;
}

.button.click:after {
    animation: animate-click 0.6s ease-out forwards;
    display: block;
}

@keyframes animate-click {
    0% {
        opacity: 1;
        transform: scale3d(0.4, 0.4, 1);
    }

    80% {
        box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1);
        opacity: 0.1;
    }

    100% {
        opacity: 0;
        box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1);
        transform: scale3d(1.2, 1.2, 1);
    }
}

Разберем как это работает. Сначала добавляем после кнопки блок эффекта, задаем ему размеры и позиционирование. По умолчанию блок скрыт. У него есть внутренняя тень, которая заполняет почти весь блок.

Далее прописываем анимацию, если у кнопки добавлен класс .click. Обычно анимацию добавляют, например, при наведении на элемент, но в нашем примере класс будет добавляться блоку скриптом. И анимация будет срабатывать каждый раз, когда у кнопки появляется этот .click. Без скрипта такая анимация сработает просто при загрузке страницы.

Прописываем саму анимацию. Сначала блок уменьшается в размерах до 40% свойством transform: scale3d(0.4, 0.4, 1);. Потом следует плавное снижение прозрачности и уменьшение внутренней тени, то есть она стягивается от центра к краям, что визуально выглядит, как увеличение блока. При этом сам блок увеличивается, становясь прозрачным, это добавляет эффект волнообразного исчезания тени, как будто она догоняет расширяющийся блок.

Можно изменять цвет, время анимации, изначальный размер блока, размер при сжатии и увеличении, чтобы добиться желаемого эффекта. Теперь осталось добавить JS код. 

// После загрузки документа
document.addEventListener("DOMContentLoaded", () => {
    // Определяем блок кнопки
    const button = document.querySelector('.button');
    // Вешаем прослушиватель события по клику на кнопку
    button.addEventListener("click", (event) => {
        // Определяем элемент по которому кликнули
        const elem = event.target;
        elem.classList.add('click'); // Добавляем блоку класс .click
        setTimeout(function() {
            elem.classList.remove('click'); // Удаляем класс .click через 400ms
        }, 400);
    });
});

Вот и все, теперь у нас есть кнопки с эффектом при клике. Если Вам понравилась статья, можете поделиться ей в соцсетях и отложить в закладки, чтобы подсмотреть при необходимости. Спасибо за прочтение :)