SOFTWARE DOWNLODE: Add css download bu

Hello friends we are discussing how to add beautiful download button in blog posts which is made in Pure Css3 with hover effect.This download button can be used in websites/blogs.When you want to share download link then this widget attract your visitor.

Step1:How To Add Css3 Code

Go to Blogger >> Template >> Edit Template >> Search ]]></b:skin> tag using (ctrl+f).
Copy the below code and paste the code before/above the ]]></b:skin>

.button {
margin-top: 20px;
}

a.blue {
display: block;
position: relative;
width: 155px;
height: 38px;
margin: 0 auto;
padding: 12px 0 0 65px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUtNJNXTq-H7Ags1y5WsPRLKfeRsp5PRnFKppiMk-PWvwLTr6jn90UIj7Kvttgx39yddsGZisEVusm5QcZJx1xgWAjDFRpCzCexNx2nxXtBZ2klM_NAfFnYhnshpcvbVk7TWNTbdC8HqYc/s1600/arrow.png) 25px center no-repeat; /* IE < 9 */
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUtNJNXTq-H7Ags1y5WsPRLKfeRsp5PRnFKppiMk-PWvwLTr6jn90UIj7Kvttgx39yddsGZisEVusm5QcZJx1xgWAjDFRpCzCexNx2nxXtBZ2klM_NAfFnYhnshpcvbVk7TWNTbdC8HqYc/s1600/arrow.png) 25px center no-repeat,
-webkit-gradient(linear, left top, left bottom, from(#bcdeeb), to(#7cbdd7));
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUtNJNXTq-H7Ags1y5WsPRLKfeRsp5PRnFKppiMk-PWvwLTr6jn90UIj7Kvttgx39yddsGZisEVusm5QcZJx1xgWAjDFRpCzCexNx2nxXtBZ2klM_NAfFnYhnshpcvbVk7TWNTbdC8HqYc/s1600/arrow.png) 25px center no-repeat,
-webkit-linear-gradient(top, #bcdeeb, #7cbdd7);
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUtNJNXTq-H7Ags1y5WsPRLKfeRsp5PRnFKppiMk-PWvwLTr6jn90UIj7Kvttgx39yddsGZisEVusm5QcZJx1xgWAjDFRpCzCexNx2nxXtBZ2klM_NAfFnYhnshpcvbVk7TWNTbdC8HqYc/s1600/arrow.png) 25px center no-repeat,
-moz-linear-gradient(top, #bcdeeb, #7cbdd7);
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUtNJNXTq-H7Ags1y5WsPRLKfeRsp5PRnFKppiMk-PWvwLTr6jn90UIj7Kvttgx39yddsGZisEVusm5QcZJx1xgWAjDFRpCzCexNx2nxXtBZ2klM_NAfFnYhnshpcvbVk7TWNTbdC8HqYc/s1600/arrow.png) 25px center no-repeat,
-o-linear-gradient(top, #bcdeeb, #7cbdd7);
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUtNJNXTq-H7Ags1y5WsPRLKfeRsp5PRnFKppiMk-PWvwLTr6jn90UIj7Kvttgx39yddsGZisEVusm5QcZJx1xgWAjDFRpCzCexNx2nxXtBZ2klM_NAfFnYhnshpcvbVk7TWNTbdC8HqYc/s1600/arrow.png) 25px center no-repeat,
-ms-linear-gradient(top, #bcdeeb, #7cbdd7);
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUtNJNXTq-H7Ags1y5WsPRLKfeRsp5PRnFKppiMk-PWvwLTr6jn90UIj7Kvttgx39yddsGZisEVusm5QcZJx1xgWAjDFRpCzCexNx2nxXtBZ2klM_NAfFnYhnshpcvbVk7TWNTbdC8HqYc/s1600/arrow.png) 25px center no-repeat,
linear-gradient(to bottom, #bcdeeb, #7cbdd7);
background-color: #85c2da;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow:
0 0px 3px 0 #fff inset,
0 -1px 0 0 rgba(255,255,255,.05) inset;
-webkit-box-shadow:
0 0px 3px 0 #fff inset,
0 -1px 0 0 rgba(255,255,255,.05) inset;
box-shadow:
0 0px 3px 0 #fff inset,
0 -1px 0 0 rgba(255,255,255,.05) inset;
font-family: 'Myriad Pro', Arial, Helvetica, sans-serif;
font-size: 24px;
line-height: 24px;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
a.blue::before {
content: '';
position: absolute;
z-index: -1;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
background-color: #3c8dac;
background-image: -webkit-gradient(linear, left top, left bottom, from(#85c2da), to(#3c8dac));
background-image: -webkit-linear-gradient(top, #85c2da, #3c8dac);
background-image: -moz-linear-gradient(top, #85c2da, #3c8dac);
background-image: -o-linear-gradient(top, #85c2da, #3c8dac);
background-image: -ms-linear-gradient(top, #85c2da, #3c8dac);
background-image: linear-gradient(to bottom, #85c2da, #3c8dac);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
a.blue::after {
content: '';
position: absolute;
z-index: -2;
top: 8px;
right: -1px;
bottom: -8px;
left: -1px;
background: #579ab4;
border: 1px solid #4d89a0;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
}

a.blue:hover {
background: #85c2da url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUtNJNXTq-H7Ags1y5WsPRLKfeRsp5PRnFKppiMk-PWvwLTr6jn90UIj7Kvttgx39yddsGZisEVusm5QcZJx1xgWAjDFRpCzCexNx2nxXtBZ2klM_NAfFnYhnshpcvbVk7TWNTbdC8HqYc/s1600/arrow.png) 25px center no-repeat;
}
a.blue:active {
top: 4px;
}
a.blue:active::after {
top: 4px;
bottom: -4px;
}