How to create waves on button with CSS and HTML?
Last Updated :
24 Jul, 2024
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
<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.
css
<style>
@import url("https://fonts.googleapis.com/css?family=Noto+Sans");
* {
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:
css
<html>
<head>
<style>
@import url("https://fonts.googleapis.com/css?family=Noto+Sans");
* {
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: