by Sai gowtham

How to Create a Codepen animated Button with CSS

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="" target="_blank" class="animated-button">
  <span>Start Coding</span>

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.

    font-size: 1rem;
    font-weight: 400;
    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*/

  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{
    background-image: linear-gradient(114deg,#c1b562,#b1b1ea,#bb46a7,#b4b783,orange);

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

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

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

    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.


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="" target="_blank" tab-index="-1">
      <span>Start Coding</span>