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: