Add a Pro Download Button With Mouse Hover Effect

Buttons are very important for the blogger OR if you want to add a button which gives some downloading stuff then you can easily add this button and also It'll give a very professional look to your blog which is very important in today's day because many visitors always think and feel about the professionalism of the blogger template and buttons and others stuff like widgets, buttons, plugins they always gives importance to the look of any template, which looks likes a professional.

 Add Pro Download Button

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML 
• Press Ctrl + F and search the code shown below.

]]></b:skin>

• Paste below code just before ]]></b:skin>

#RWG-probutn .pure {
background:#E3E3E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijvF6hYkG7KaCeUZ7YuQ-pMzDBqA1wGRPCn-vsPhhrK4-BkQQbd-9RT2eLYaqpi65A7Ueiq5ORyP_yWfRXDY9vQTBbjbrwP-dDsq6uXhkkiXJZh5QzorxCChIkzFxZSztc6m0vXscI6Hf8/s1600/RWG-probutn.png) 3px 0 no-repeat;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
display:block;
color:#212121;
float:none;
height:80px;
width:80px;
line-height:80px;
padding-top:1px;
position:relative;
text-shadow:0 1px 0 #FAFAFA;
text-align:center;
text-decoration:none;
white-space:nowrap;
-webkit-transition:width .25s ease-in-out, background-color .25s ease-in-out;
-ms-transition:width .25s ease-in-out, background-color .25s ease-in-out;
-moz-transition:width .25s ease-in-out, background-color .25s ease-in-out;
-o-transition:width .25s ease-in-out, background-color .25s ease-in-out;
transition:width .25s ease-in-out, background-color .25s ease-in-out;
-webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
-o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;
margin:10px auto 0;
}

#RWG-probutn a span {
display:none;
font-size:1.4em;
}

#RWG-probutn:hover a span {
display:inline;
}

#RWG-probutn:hover .pure {
width:420px;
}

#RWG-probutn .download {
background-position:0 0;
}

• Now Save Your Template.

How to Use it in Post ....?

• Open post editor
• Click HTML button 
• Post below code in it

<div id="RWG-probutn">
<a href="#" class="pure download"><span>Download</span></a>
</div>

• Finally, Publish Your Post and You're Done.

Make Changes...!

• Replace it # with your button link.
• Replace it Download with your button name.