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.
<html> <head></head> <body> <div class="wrapper"> <a href="#" class="wave-btn"><span>wave</span></a> </div> </body> </html> |
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.
<style> * { position: relative; } html, body { margin: 0; padding: 0; height: 100%; } .wrapper { height: 100%; background-color: #f5f6fa; } .wave-btn { color: #fff; text-decoration: none; border: 3px solid #fff; padding: 5px 30px; font-size: 22px; font-weight: 600; font-family: "Noto Sans"; line-height: 52px; border-radius: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; transition: all 1s; } .wave-btn:before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 130px; background-color: #0097e6; top: 30px; left: 50%; transform: translate(-50%); animation: wave 5s infinite linear; transition: all 1s; } .wave-btn:hover:before { top: 15px; } @keyframes wave { 0% { transform: translate(-50%) rotate(-180deg); } 100% { transform: translate(-50%) rotate(360deg); } } </style> |
Complete Code:
<html> <head> <style> * { position: relative; } html, body { margin: 0; padding: 0; height: 100%; } .wrapper { height: 100%; background-color: #f5f6fa; } .wave-btn { color: #fff; text-decoration: none; border: 3px solid #fff; padding: 5px 30px; font-size: 22px; font-weight: 600; font-family: "Noto Sans"; line-height: 52px; border-radius: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; transition: all 1s; } .wave-btn:before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 130px; background-color: #0097e6; top: 30px; left: 50%; transform: translate(-50%); animation: wave 5s infinite linear; transition: all 1s; } .wave-btn:hover:before { top: 15px; } @keyframes wave { 0% { transform: translate(-50%) rotate(-180deg); } 100% { transform: translate(-50%) rotate(360deg); } } </style> </head> <body> <div class="wrapper"> <a href="#" class="wave-btn"><span>wave</span></a> </div> </body> </html> |
Output:
Please Login to comment...