Simple button ripple click effect

button-ripple.scss

// Button ripple effect
// similar to Google's material design
.btn-ripple {
    position: relative;
    overflow: hidden;

    &::after {
        display: none;
        content: "";
        position: absolute;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.3);
        width: 100px;
        height: 100px;
        margin-top: -50px;
        margin-left: -50px;
        top: 50%;
        left: 50%;
        animation: ripple 1s;
        opacity: 0;
    }

    &:focus:not(:active)::after {
        display: block;
    }
}

@keyframes ripple {
    from {
        opacity: 1;
        transform: scale(0);
    }
    to {
        opacity: 0;
        transform: scale(10);
    }
}