Here I you can get the Animated CSS3 Buttons for your web page. In this not used any script for animation. Only used html and CSS3. You copy the css and html and used on your webpage directly.
CSS:
.download-btn {
-webkit-transition: color 0.3s;
transition: color 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
font-weight: 600;
border-radius: 5px;
float: left;
font-size:1.1em;
width: 180px; /*if need width means add otherwise remove it*/
display: block;
margin: 1em;
padding: 1em 2em;
border: none;
vertical-align: middle;
position: relative;
z-index: 1;
-webkit-backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
color: #37474f;
border-color: #37474f;
}
.download-btn:focus {
outline: none;
}
.download-btn::before,
.download-btn::after {
content: '';
position: absolute;
border-radius: inherit;
background: #C6DA3C;
z-index: -1;
}
.download-btn::before {
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
opacity: 0.2;
-webkit-transform: scale3d(0.7, 1, 1);
transform: scale3d(0.7, 1, 1);
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
.download-btn::after {
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: scale3d(1.1, 1, 1);
transform: scale3d(1.1, 1, 1);
-webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
transition: transform 0.3s, background-color 0.3s;
}
.download-btn::before,
.download-btn::after {
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.download-btn:hover {
color: #fff;
}
.download-btn:hover::before {
opacity: 1;
}
.download-btn:hover::after {
background-color: #37474f;
}
.download-btn:hover::after,
.download-btn:hover::before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.cont{
display:block;
padding:10px;
float:left;
} HTML:
<div class="cont"> <button class="download-btn">Download</button> <button class="download-btn">Add to Cart</button> <button class="download-btn">Login</button> <button class="download-btn">Signup</button> </div>
Demo:
