Back

Beautiful button animation - How it's done

Tutorial on how to create a beautiful animation button - CSS only.

HTML

For HTML we gave only one button element with 'rotation' class.


        <button class="rotation">design</button>

CSS

For CSS, first we'll set some styling to a 'rotation' class. We'll set a blue neon shadow, inside as well as outside. Then we'll set text color to blue, remove the button's default border and round it to 5 pixels. We'll position to relative, add some paddings and set background color to white.


        .rotation {
            background-color: #fff;
            box-shadow: 0 0 10px #5271ff,
                inset 0 0 10px #5271ff;
            color: #5e7cff;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            position: relative;
        }

Now we'll style the before and after pseudo elements. These elements will rotate around the button as border. First, we'll set the content, and position to absolute with -5px on all sides so it is 5px bigger than the button. We'll round the borders for 5px and set it to solid two pixels wide light blue.


        .rotation::before, .rotation::after {
            content: '';
            border: 2px solid #b5c3ff;
            border-radius: 5px;
            position: absolute;
            top: -5px;
            bottom: -5px;
            left: -5px;
            right: -5px;
        }

Now we'll create the animation for pseudo elements. Using clip-path property, we'll create a linear rotation effect.


        @keyframes rotating {
            0% {clip-path: inset(96% 0 0 0);}
            20% {clip-path: inset(0 96% 0 0);}
            50% {clip-path: inset(0 0 96% 0);}
            75% {clip-path: inset(0 0 0 96%);}
            100% {clip-path: inset(96% 0 0 0);}
        }

Now we'll add that animation to our pseudo elements. We'll set the duration of 3 seconds, infinite and linear.


        .rotation::before, .rotation::after {
            content: '';
            border: 2px solid #b5c3ff;
            border-radius: 5px;
            position: absolute;
            top: -5px;
            bottom: -5px;
            left: -5px;
            right: -5px;
            animation: rotating 3s infinite linear; /*  Animation  */
        }

Now we'll simply add animation delay of half the time (1.5 s) to after pseudo element.


        .rotation::after {
            animation-delay: 1.5s;
        }

And that is it.

Video tutorial

You can find the video with step-by-step guide on youtube:

Whole code

<button class="rotation">design</button>

<style>
.rotation {
  background-color: #fff;
  box-shadow: 0 0 10px #5271ff,
    inset 0 0 10px #5271ff;
  color: #5e7cff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  position: relative;
}
.rotation::before, .rotation::after {
  content: '';
  border: 2px solid #b5c3ff;
  border-radius: 5px;
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
  animation: rotating 3s infinite linear;
}
.rotation::after {
  animation-delay: 1.5s;
}
@keyframes rotating {
  0% {clip-path: inset(96% 0 0 0);}
  20% {clip-path: inset(0 96% 0 0);}
  50% {clip-path: inset(0 0 96% 0);}
  75% {clip-path: inset(0 0 0 96%);}
  100% {clip-path: inset(96% 0 0 0);}
}

</style>

Thank you for reading this article.

Beautiful button animation - How it's done

HTML

CSS

Video tutorial

Whole code

More buttons

Similar

See also