Creating an animated button with CSS

One way to impress of your visitors is to add simple animations. In this tutorial, we'll be using CSS transition properties to create an animated button.

Creating an animated button with CSS

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


Share Tweet Send
0 Comments
Loading...