@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

.ripple-button {
    position: relative;
    overflow: hidden;

    padding: 1rem 2rem;

    font-family: "Roboto", sans-serif;
    font-size: 1.5rem;

    outline: none;
    border: none;
    border-radius: 0.25rem;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, .3);

    cursor: pointer;
}

.ripple-button .ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 600ms linear;
    background-color: rgba(255, 255, 255, .7);
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}