New Download Button for blogger

Hey guys, Today I have a neat and clean button for blogger It is very light weight no javascript and it looks great. Just the steps given below to add it

LIVE DEMO

sky_2.png

How to add it to Blogger

-Go to template>Edit HTML
-Click anywhere and press CTRL+P
-Search for ]]></b:skin>
-Paste the following code above it

.download-button {
display: inline-block; /* 1 */
margin-right: 10px; /* 2 */
margin-top: 30px; /* 3 */
padding: 30px 30px 30px 80px; /* 4 */
color: #686868; /* 5 */
text-decoration: none; /* 6 */
border: 1px solid #E3E3E3; /* 7 */
position: relative; /* 8 */
transition: 0.15s; /* 9 */
}
.download-button:focus,
.download-button:hover {
border-color: #E31A4C; /* 1 */
outline: none; /* 2 */
}
.download-button:active {
animation: enlight 0.5s;
}
.download-button::before {
content: ''; /* 1 */
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2037/download.svg') no-repeat center; /* 2 */
position: absolute; /* 3 */
top: 0; /* 4 */
bottom: 0; /* 4 */
left: 0; /* 5 */
width: 80px; /* 6 */
}
.download-button[data-filesize]::after {
content: '(' attr(data-filesize) ' MB)'; /* 1 */
font-size: 0.8em; /* 2 */
color: #969696; /* 3 */
margin-left: 10px; /* 4 */
}
@keyframes enlight {
to { box-shadow: 0 0 0 8px #fce8ed; }
}