DEV Community

Cover image for Button Ripple Effect in HTML CSS & JavaScript

Button Ripple Effect in HTML CSS & JavaScript

codingnepal profile image CodingNepal ・1 min read

Ripple effect provides an immediate visual confirmation at the point of contact when the users interact with UI elements. And a button is any graphic or text box that lets your visitors interact with your website. The interaction is commonly an action that you want your visitors to take.

In this program (Button Ripple Effect), at first, on the webpage, there are two gradient buttons with different background-color. Generally, gradient means a mix of two or more colors. And when you click on the particular button there is shown a ripple effect and it expands smoothly as you can see in the image. This ripple effect is dynamic that means this ripple starts expanding from the point where you clicked.

You can download the source code files through the given link. Click here to download source code files.

Discussion (0)

Forem Open with the Forem app