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.
The HTML code is a simple structure that contains a wrapper where the span tag is wrapped inside the anchor tag.
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.
- How to create a clickable button in HTML ?
- How to Create a Transparent button using HTML and CSS ?
- How to create a shinny button using HTML and CSS ?
- How to create directory with HTML button and PHP ?
- How to create Shaky button using HTML and CSS ?
- How to create a button with stitched border using HTML and CSS?
- How to Create Custom Radio Button using HTML and CSS ?
- How to create an HTML button that acts like a link?
- How to create Neon Light Button using HTML and CSS ?
- How to Create an Effect to Change Button Color using HTML and CSS ?
- How to create button to open SMS compose to a phone number using HTML ?
- How to create a radio button similar to toggle button using Bootstrap ?
- How to Create Custom Shape Button using SVG ?
- How to Create Button in React-Native App ?
- How to create a Ripple Effect on Click the Button ?
- How to create button dynamically with click event in Angular ?
- Materialize CSS | Waves
- HTML | button Tag
- HTML | DOM button Object
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.