How To Create An Animated Button With Border Hover Animation Like CodePen.

0
How To Create An Animated Button With Border Hover Animation

Hello readers! Today in this blog, you will learn How To Create An Animated Button With Border Hover Animation using only HTML and CSS similar to CodePen. Earlier I have shared a blog on How To Create A Business Website Using HTML and CSS. and now I’m going to create a Border Animation on the Button.

What is Button?

A button refers to any graphical control that provides the user with an easy way to trigger an event, such as searching for a question in a search engine or linking it to dialog boxes, such as confirming an action. , edit, delete, or whatever for any piece of information, there is also a use button.

This program (An Animated Button With Border Hover Animation) has a button with a gradient border at the top of the web page, and when you hover over it, the button border starts to animate, move, or glow. move the mouse pointer or disable the button, the border stops working. You may have seen this kind of border animation on a button in the code.

You Might Like This Blog:

Step 1:

Create The Structure of The Button using HTML.

To create this program: ( An Animated Button With Border Hover Animation ). Initially you need to create two files one HTML (.html) and another CSS file (.css). After creating these files, just paste the following codes into your VS IDE code sample and create an HTML file called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.

<!DOCTYPE html>
<!-- Created By CodeWithNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Button Border Animation | CodeWithNepal</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="btn">
      <a href="#"><span>Download Now</span></a>
    </div>
</body>
</html>

Step 2:

Design the Button using CSS.

And, create a CSS file named style.css and paste the indicated codes into your CSS file. Remember, you must create a .css file.

@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: rgb(0, 0, 0);
}
.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%);
} 

Output

How To Create An Animated Button With Border Hover Animation

LEAVE A REPLY

Please enter your comment!
Please enter your name here