Creating an animated button with CSS
How To HTML CSS

Creating an animated button with CSS

Editorial Team
Editorial Team

Follow us on Discord or Telegram to get access to free tutorials and updates.

One way to improve user experience of your website is to add simple animations. These animations includes changing the color, position, size etc of the page elements.

In this tutorial, we’ll be using CSS transition properties to create an animated button.

Click Me

Creating an animated button

1) HTML Markup

First, create an HTML document and paste the following code:

<a href="#" class="myButton">Click Me</a>

2) CSS

Add the following style to your HTML page.

<style>
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
@keyframes btnAnimate {    
    0%{background-position: 0 200px}
    100%{background-position: 200px 0}
}
.myButton {
    width: 200px;
    padding: 20px;
    text-align: center;
    position: relative;
    background-color: white;
    display: block;
    margin: auto;
    margin-top: 50px;
    text-decoration: none;
    color: black;
}
.myButton:before {
    content: '';
    height: 100%;
    width: 100%;
    border-radius: 5px;
    transform: scale( 1.03, 1.08 );
    position: absolute;
    background: linear-gradient( to right, #ffcd44, #fafafa, #1D8EF7, #fafafa, #ffcd44 );
    top: 0;
    left: 0;
    z-index: -1;
    animation-name: btnAnimate;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
</style>

Try it yourself