Skip to main content

Archive

Show more

Button Border Animation On Hover | HTML And CSS

Button-With-Border-Animation-HTML-And-CSS

Button Border Animation On Hover | HTML And CSS

"Button with Border Animation on Hover" is a new concept on the button animation series. If you visit many different websites you may have seen many animations on the buttons. We will also design one of those effects in this article as you can see in the image. You can visit our button design section.

In this article, we will see how to add border animation to a button. To create this button animation, we will take an HTML 'button' tag. Inside the same button, we will add four 'span' tags and write the value of the button as 'facebook'. And now we will use those four 'span' tags as the border of the button. This border will show the animation effect when you mouse over the button and when you remove the mouse, the border will disappear.



01. html structure

<!DOCTYPE html>
<html>
<head>
 <title>Button Border Animation On Hover | Rustcode</title>
 <link rel="stylesheet" href="style.css">
</head>

<body>

  main content.

</body>
</html>


02. HTML

Before writing html code let's include some important plugins inside html document.

<body>

 <a href="#">FACEBOOK
  <span></span>
  <span></span>
  <span></span>
  <span></span>
 </a>

</body>


03. CSS

gsap code to create animation. This is a very simple and basic animation code of 'tweenmax'.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #EEE;
}

a{
  text-decoration: none;
  display: inline-block;
  position: relative;
  color: #FFF;
  padding: 20px 40px;
  border-radius: 2px;
  background-color: #454ADE;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
}

a:hover{
  background: black;
  transition: 0.5s;
  transition-delay: 1s;
}

a span{
  position: absolute;
  display: block;
  background: black;
}

a span:nth-child(1){
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 4px;
  transform: scaleX(0);
  transition: transform 0.24s;
  transform-origin: right;
}

a:hover span:nth-child(1){
  transform: scaleX(1);
  transition: transform 0.24s;
  transform-origin: left;
}

a span:nth-child(2){
  right: 0px;
  bottom: 0px;
  width: 4px;
  height: 100%;
  transform: scaleX(0);
  transition: transform 0.24s;
  transform-origin: top;
}

a:hover span:nth-child(2){
  transform: scaleX(1);
  transition: transform 0.24s;
  transform-origin: bottom;
  transition-delay: 0.26s;
}

a span:nth-child(3){
  top: 0px;
  right: 0px;
  width: 100%;
  height: 4px;
  transform: scaleX(0);
  transition: transform 0.24s;
  transform-origin: left;
}

a:hover span:nth-child(3){
  transform: scaleX(1);
  transition: transform 0.24s;
  transform-origin: right;
  transition-delay: 0.36s;
}

a span:nth-child(4){
  left: 0px;
  top: 0px;
  width: 4px;
  height: 100%;
  transform: scaleY(0);
  transition: transform 0.24s;
  transform-origin: bottom;
}

a:hover span:nth-child(4){
  transform: scaleX(1);
  transition: transform 0.24s;
  transform-origin: top;
  transition-delay: 0.46s;
}


If you want to learn animation using javascript, gsap and plugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. You can visit gsap animations playlist.


04. Youtube Video

Here we are attaching a Youtube video from our channel so that you can understand this article better and you can create a better web user interface. We have a lot of videos on our Youtube channel which is related to the user interface and web development. You can also, learn about web development from there.



05. Source Code

After reading this article and watching a Youtube video, if you want to download the source code, you can download it from here and change this according to your need.



Comments