HOW TO ADD CSS3 CODE OR DOWNLOAD BUTTION

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.
step 1

• 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/AVvXsEhxyYdq8TQU_VVuXegbeT_gsw621_rqyacD44fDk2k_nHitv_tWNMWb8LENe1dF7WxILfJDKbEoIuD9ySgdV3GMX8aDpkqOeuVXcERw52Rd21GB7pgfWIaIExXtkC-FvcxT98VuOT8TVZlR/s1600/arrow.png) 25px center no-repeat; /* IE < 9 */
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxyYdq8TQU_VVuXegbeT_gsw621_rqyacD44fDk2k_nHitv_tWNMWb8LENe1dF7WxILfJDKbEoIuD9ySgdV3GMX8aDpkqOeuVXcERw52Rd21GB7pgfWIaIExXtkC-FvcxT98VuOT8TVZlR/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/AVvXsEhxyYdq8TQU_VVuXegbeT_gsw621_rqyacD44fDk2k_nHitv_tWNMWb8LENe1dF7WxILfJDKbEoIuD9ySgdV3GMX8aDpkqOeuVXcERw52Rd21GB7pgfWIaIExXtkC-FvcxT98VuOT8TVZlR/s1600/arrow.png) 25px center no-repeat,
-webkit-linear-gradient(top, #bcdeeb, #7cbdd7);
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxyYdq8TQU_VVuXegbeT_gsw621_rqyacD44fDk2k_nHitv_tWNMWb8LENe1dF7WxILfJDKbEoIuD9ySgdV3GMX8aDpkqOeuVXcERw52Rd21GB7pgfWIaIExXtkC-FvcxT98VuOT8TVZlR/s1600/arrow.png) 25px center no-repeat,
-moz-linear-gradient(top, #bcdeeb, #7cbdd7);
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxyYdq8TQU_VVuXegbeT_gsw621_rqyacD44fDk2k_nHitv_tWNMWb8LENe1dF7WxILfJDKbEoIuD9ySgdV3GMX8aDpkqOeuVXcERw52Rd21GB7pgfWIaIExXtkC-FvcxT98VuOT8TVZlR/s1600/arrow.png) 25px center no-repeat,
-o-linear-gradient(top, #bcdeeb, #7cbdd7);
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxyYdq8TQU_VVuXegbeT_gsw621_rqyacD44fDk2k_nHitv_tWNMWb8LENe1dF7WxILfJDKbEoIuD9ySgdV3GMX8aDpkqOeuVXcERw52Rd21GB7pgfWIaIExXtkC-FvcxT98VuOT8TVZlR/s1600/arrow.png) 25px center no-repeat,
-ms-linear-gradient(top, #bcdeeb, #7cbdd7);
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxyYdq8TQU_VVuXegbeT_gsw621_rqyacD44fDk2k_nHitv_tWNMWb8LENe1dF7WxILfJDKbEoIuD9ySgdV3GMX8aDpkqOeuVXcERw52Rd21GB7pgfWIaIExXtkC-FvcxT98VuOT8TVZlR/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/AVvXsEhxyYdq8TQU_VVuXegbeT_gsw621_rqyacD44fDk2k_nHitv_tWNMWb8LENe1dF7WxILfJDKbEoIuD9ySgdV3GMX8aDpkqOeuVXcERw52Rd21GB7pgfWIaIExXtkC-FvcxT98VuOT8TVZlR/s1600/arrow.png) 25px center no-repeat;
}
a.blue:active {
top: 4px;
}
a.blue:active::after {
top: 4px;
bottom: -4px;
}

step 2. add button to blogger post

• Go to Blogger >> Select Blog >> Add post/page >> Select Html.
• And copy the below code and paste it in the Html.

<div class="button">

<a class="blue" href="Place your Download Link Here">Download</a>

</div>

example

Download