Cool CSS Button Border Animation on Hover

Here CSS code for Button Border Animation on Hover. This Code teaches you how pure CSS works. This animation made by HTML and CSS only. So here is the code.   Cool CSS Button Border Animation on Hover

ButtonBorder.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Button Border animtion</title>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <a href="#"><span></span>Button</a>
  </body>
</html>

Style.css

*{
  margin: 0;
  padding: 0;
  background: #e0dcdc;
}
a{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 280px;
  height: 100px;
  background:#e0dcdc;
  text-transform: capitalize;
  text-align: center;
  line-height: 100px;
  color:black;
  text-decoration: none;
  font-size: 40px;
  font-family: verdana;
  letter-spacing: 4px;
}
a::before,a::after,span::after,span::before
{
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #ff0;
  transition: 1s;
  mix-blend-mode:hue;
}
a::before
{
  background: blue;
  top:-5px;
  left:-5px;
}
a::after
{
  background: green;
  top:-5px;
  right:-5px;
}
span::after
{
  background: red;
  bottom:-5px;
  right:-5px;
}
span::before
{
  background: yellow;
  bottom:-5px;
  left:-5px;
}
a:hover::before, a:hover::after,
a:hover span::before,
a:hover span::after
{
  width: calc(280px/2);
  height: calc(100px/2);
}

Output

(Try yourself to see animation)

cool css button border animation on hover, css, pure css, css animation

Download this code here Download

So, this the cool CSS button border animation on hover. Try yourself and make an Awesome website.

You may also like,

Support CodeSnail

If you appreciate my work, or if it has helped you along your journey. It would mean a lot to me if you could write a message on my wall and share a cup of coffee (or tea) with me.

Buy Me A Coffee
Your subscription could not be saved. Please try again.
Your subscription has been successful.

Newsletter

Subscribe to our newsletter and stay updated.

Leave a Comment