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 1 s;
}
.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 5 s infinite linear;
transition: all 1 s;
}
.wave-btn:hover:before {
top : 15px ;
}
@keyframes wave {
0% {
transform: translate( -50% ) rotate( -180 deg);
}
100% {
transform: translate( -50% ) rotate( 360 deg);
}
}
</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 1 s;
}
.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 5 s infinite linear;
transition: all 1 s;
}
.wave-btn:hover:before {
top : 15px ;
}
@keyframes wave {
0% {
transform: translate( -50% ) rotate( -180 deg);
}
100% {
transform: translate( -50% ) rotate( 360 deg);
}
}
</style>
</head>
<body>
<div class= "wrapper" >
<a href= "#" class= "wave-btn" ><span>wave</span></a>
</div>
</body>
</html>
|
Output:
Last Updated :
21 Jun, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...