Button with Border Hover Animation using HTML & CSS

Hello readers, Today in this blog you'll learn how to create an Animated Button with Border Hover Animation using only HTML & CSS. Earlier I have shared a blog on how to create a Colorful Gradient Glowing Effect on Buttons using CSS and now I'm going to create a Border Animation on Button.

Button refers to any graphical control element that gives the user an easy way to trigger an event, like searching for a question in a search engine or to associated with dialog boxes, like confirming an action. If the action is to create, edit, delete, or anything else to any piece of information, there is also use a button.

In this program (Button with Border Hover Animation), at first, on the webpage, there is a button with a gradient border and when you hover on it then the border of the button start animates, moving, or glowing. When you exit or out your mouse pointer from the button, the border stops animating. This type of border animation on the button you may have seen on the codepen.

Download code here

CSS Code

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100vh;
  place-items: center;
  background: #000;
}
.btn a{
  position: relative;
  color: #f5f5f5;
  height: 70px;
  width: 220px;
  display: block;
  text-align: center;
  border-radius: 10px;
  text-decoration: none;
  background-image: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);
}
.btn a:hover{
  animation: rotate 0.4s linear infinite;
}
@keyframes rotate {
  100%{
    filter: hue-rotate(-360deg)
  }
}
.btn a span{
  height: 88%;
  width: 96%;
  background: #111;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 6px;
  line-height: 62px;
  font-size: 25px;
  transform: translate(-50%, -50%);
}

HTML Code

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
 <!DOCTYPE html>
<!-- Created By Mirulcoding - https://mirulcoding.blogspot.com/ -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <title>Button Border Animation |  mirulcoding</title>
  </head>
  <body>
    <div class="btn">
      <a href="#"><span>Hover Me</span></a>
    </div>
</body>
</html>

Button with Border Hover Animation using HTML & CSS

Post a Comment

Post a Comment

Contact Form