How to Add Pro Download Button With Mouse Hover Effect in Your Blog

♠ Posted by Muhammad Kaif in Blogger Widgets,Buttons,Download Button at 22:57

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 be'coz 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.

Step 1 : Now let's start adding it...

Step 2: Login to Your Blogger Account.Go to your Blogger Dashboard>Template> Edit HTML> Proceed.

Step 3: Find [by pressing Ctrl + F ] this code in the template:

]]></b:skin>

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

#RWG-probutn .pure {
background:#E3E3E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmB_YzjukwPTdMMQKpWuxlcF5B76rjXvLB9wcsA1OVV21tDjr0yJBWKmeRu20dSJeim-9Wxm8dVIT-6rHjlL8paPftnf03_IZaklMjwPd2oe83x-AzozMabrtb0Y1OLRC3TW5uB1xwJjNh/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;
}

Step 5: Now Save Your Template.

Q: How to Use it in Post....?

Step 1: Open post editor

Step 2: Click HTML button

Step 3: Post below code in it

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

Make Changes...
Step 1: Replace it # with your button link.
Step 2: Replace it Download with your button name.

Finally, Publish Your Post and You're Done.

Pro look is very important for all kind of blogger's and also for all kinds website's and some plugins like buttons, widgets etc. they gives a good and fine look to every blog and also to a website so, I think you should try it MUST.