Open In App

How to create waves on button with CSS and HTML?

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 21 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads