How to create waves on button with CSS and HTML?

The wave effect on a button is a type of effect in which the shape of the button turns into a wave on hovering. While there are other ways to create a wave effect, a simple method is to use the keyframe property.

Approach:

In order to animate the button, we use keyframe to gradually set the transitions at different stages.

HTML Code:

The HTML code is a simple structure that contains a wrapper where the span tag is wrapped inside the anchor tag.

CSS Code:

• For CSS, these are the following steps:
• Add basic styles like background color, position the button and set the width and height of the button.
• Use animation property with identifier named as wave .
• Now use keyframes to animate each frame according to their angle by using the transform property.

Complete Code:

Output: