Button Animation CSS

Buttons are everywhere on websites. From submitting forms to changing pages, But what if we could design a button that's both functional and eye-catching?

In this tutorial I’ll show you how to make a button with animated borders using simple HTML and CSS

HTML

First create the button structure in HTML

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

The <a> tag is the button. It holds the text "button".

Inside the <a> tag, you have four <span> elements that you will use to create the animated border effect around the button.

Button Animation CSS

CSS

Now style the button, First, we’ll write some basic CSS styles like the background color and font size.

  
html, body {
  
  margin: 0;
  
  padding: 0;
  
  background-color: #0c002b;
  
  font-family: sans-serif;
  
}
  


  
a {
  
  position: absolute;
  
  top: 50%;
  
  left: 50%;
  
  transform: translate(-50%, -50%);
  
  color: #1670f0;
  
  padding: 30px 60px;
  
  font-size: 30px;
  
  letter-spacing: 2px;
  
  text-decoration: none;
  
  text-transform: uppercase;
  
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  
  overflow: hidden;
  
}

The background color is a dark navy blue (#0c002b)

The shadow effect makes the button look like it’s floating on the screen.

Button Animation CSS

Add Hover Effect

To make the button interactive, we can add hover effect.

  
a:hover {
  
  background-color: #000;
  
  color: #fff;
  
}

When someone is hovering over the button, the background and text color will change

Animating the borders

Now, the final part: adding animated borders! Each of the four <span> elements will create one side of the border, and we’ll animate them to move around the button.

    
a span:nth-child(1){
    
  position: absolute;
    
  top: 0;
    
  left: 0;
    
  width: 100%;
    
  height: 2px;
    
  background: linear-gradient(to right, #0c002b, #1779ff);
    
  animation: animate1 2s linear infinite;
    
  animation-delay: 1s;
    
}
    
@keyframes animate1{
    
  0%{
    
    transform: translateX(-100%);
    
  }
    
  100%{
    
    transform: translateX(100%);
    
  }
    
}
    


    
a span:nth-child(2){
    
  position: absolute;
    
  top: 0;
    
  right: 0;
    
  width: 2px;
    
  height: 100%;
    
  background: linear-gradient(to bottom, #0c002b, #1779ff);
    
  animation: animate2 2s linear infinite;
    
}
    


    
@keyframes animate2{
    
  0%{
    
    transform: translateY(-100%);
    
  }
    
  100%{
    
    transform: translateY(100%);
    
  }
    
}
    


    
a span:nth-child(3){
    
  position: absolute;
    
  bottom: 0;
    
  left: 0;
    
  width: 100%;
    
  height: 2px;
    
  background: linear-gradient(to left, #0c002b, #1779ff);
    
  animation: animate3 2s linear infinite;
    
  animation-delay: 1s;
    
}
    
@keyframes animate3{
    
  0%{
    
    transform: translateX(100%);
    
  }
    
  100%{
    
    transform: translateX(-100%);
    
  }
    
}
    


    
a span:nth-child(4){
    
  position: absolute;
    
  top: 0;
    
  left: 0;
    
  width: 2px;
    
  height: 100%;
    
  background: linear-gradient(to top, #0c002b, #1779ff);
    
  animation: animate4 2s linear infinite;
    
}
    
@keyframes animate4{
    
  0%{
    
    transform: translateY(100%);
    
  }
    
  100%{
    
    transform: translateY(-100%);
    
  }
    
}

Each border has its own animation, moving in a different direction to create a continuous flowing effect around the button.

Button Animation CSS

Now you have all borders animating around the button, so you have this really cool hover effect that changes the background and text color. 

This button is definitely going to catch someone's eye when they come visit your page.

Thanks for Reading

Don’t miss out on the latest trends in design—hit that follow button and join our growing community!