<h1>Animated Download Button using css</h1>
1, Create sky blue color background button.
2, Create Download icon box it contain three side Five pixel white border (left, right, botton)
3, Create Arrow
CSS pseudo selectors is used to create the arrow. :before and :after elements are used to position the arrow on top of the icon box.
4, Use the animation property to Move the arrow top to bottom.
Transform property is used to change position.
translateY position -5px. it will move the arrow top by 5 pixels,
translateY position 0px. it will move the arrow bottom by 5 pixels,
<h2>Css Code</h2>
.blue_button {
width:150px;
height:35px;
background:#0287e4;
font:bold 18px Arial, Helvetica, sans-serif;
padding-top:15px;
}
a.download-animation
{
color:#fff;
text-decoration:none;
padding:5px;
}
.download-animation span
{
display:block;
cursor
ointer;
position:relative;
width:30px;
height:20px;
margin:0 5px;
float:left;
border:5px solid #fff;
border-top:none;
}
.download-animation span:before,
.download-animation span:after
{
content:'';
display:block;
position:absolute;
}
a.download-animation span:before,
a.download-animation span:after
{
animation:bounce .4s infinite alternate;
-webkit-animation:bounce .5s infinite alternate;
}
a.download-animation span:before{
left:10px;
top:-6px;
width:10px;
height:10px;
background:#fff;
}
a.download-animation span:after
{
left:5px;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #fff;
}
@keyframes bounce {
from {
transform:translateY(-5px);
}
to {
transform:translateY(0);
}
}
@-webkit-keyframes bounce {
from {
-webkit-transform:translateY(-5px);
}
to {
-webkit-transform:translateY(0);
}
}
<h2>Html Code</h2>
<div class="blue_button">
