How to Create a Codepen animated Button with CSS

In this tutorial, we are going to learn about creating a Codepen animated button with css.

Note: This is my third project from the #15daysofcss challenge.

Codepen Demo

Here is the demo for the Codepen animated button.

Getting started

First, let’s add the HTML markup.

<a href="https://reactgo.com" target="_blank" class="animated-button">
  <span>Start Coding</span>
</a>

In the above code, we have an anchor tag <a> with a class animated-button and a span tag.

The CSS styles

In the below code, we have used the linear-gradient() function to apply the 5 different colors to the border of our button.

.animated-button{
    font-size: 1rem;
    font-weight: 400;
    text-decoration:none;
    color: #ffff;
    cursor: pointer;
    background-image: linear-gradient(164deg,#c1b562,#b1b1ea,#bb46a7,#b4b783,orange);    border-radius: 3px;
    padding:14px 3px; /* it helps to increase border width*/
}

.animated-button span{
  background: black;
  color: #ffff;
  padding:11px 30px; /* it helps to increase button width and height*/
  height:100%;
}

.animated-button:hover{
  animation: bordermove .7s linear infinite
}

The Animation

Now, we need to animate the border whenever a user hovers on the button.

To do that, we need to change the linear-gradient colors at different percentages.

@keyframes bordermove{
  0%{
    background-image: linear-gradient(114deg,#c1b562,#b1b1ea,#bb46a7,#b4b783,orange);
  }

  25%{
     background-image: linear-gradient(124deg,orange,#b1b1ea,#c1b562,#b4b783,#bb46a7);
  }

  50%{
    background-image: linear-gradient(134deg,#b4b783,#bb46a7,orange,#c1b562,#b1b1ea);
  }

  75%{
    background-image: linear-gradient(144deg,#b4b783,#b1b1ea,orange,#bb46a7,#c1b562);
  }

  100%{
    background-image: linear-gradient(114deg,#c1b562,#b4b783,#b1b1ea,orange,#bb46a7);
  }
}

We have used the same five colors in the 0% to 100% but each level we have changed the position of the colors.

I hope you enjoyed ✓ and learned something new.

If you are interested in doing 15daysofcss challenge checkout 15daysofcss page.

Accessibility

If you want a button element with a link tag and at the same time to be accessible with tabs you can use the below HTML markup.

<button class="animated-button">
    <a href="https://reactgo.com" target="_blank" tab-index="-1">
      <span>Start Coding</span>
    </a>
</button>