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>
