Creating an animated button with CSS

Creating an animated button with CSS

Mishel Shaji
Mishel Shaji

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.

*, *: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;

Try it yourself