How to create waves on button with CSS and HTML?

21 Jun, 2020
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:
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>  @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:
<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:
CSS-Advanced
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.