Water Ripple Effects using pure CSS | No JavaScript | Neumorphism UI Button Design 2020

Watch Video - https://youtu.be/8t-Mrad6Cdk

In this video, I will show you how to create a Neumorphism button and create Water Ripple Effect using Pure CSS, No JavaScript in quick, easy, and simple steps. Click the button to animate the Wave effect CSS tutorial.



CSS Code :

button {
    border: none;
    border-radius: 40px;
    padding: 20px 30px;
    font-size: 20px;
    text-transform: uppercase;
    cursor: pointer;
    color: #34495e;
    letter-spacing: 2px;
    background-color: transparent;
    outline: none;
    box-shadow: -7px -7px 17px rgba(255,255,255,0.6),
        7px 7px 17px rgba(70,70,70,0.12);
}

.wave {
    background-position: center;
    transition: background 0.8s;
}
.wave:hover {
    background: #f2f2f3 radial-gradient(circle, transparent 1%, #f2f2f3 1%) center/15000%;
}

.wave:active{
    background-color: #bdc3c7;
    background-size: 100%;
    transition: background 0s;
}

.wave:focus {
    outline: none;
}