Creating an animated button with CSS

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