Best Blogger Download / Demo Button with Push Effect

I'm sharing here the best Download or Demo button for Blogger Blogs with an awesome push effect, This is a nice creation by Suryakant Sao from CSSDeck and I just customize some things in the code for it to be more easy to implement on blogger blogs.

Also Read: Top 5 Best Free Online CSS Button Makers / Generators.

This Download / Demo button is very lightweight because it was made with pure CSS and it has no effect on the load time of your Blog. This is a really nice button that when you clicked, It will generate an effect that's like you have pushed it with your mouse arrow. This is just the starting on my sharing of Best CSS Buttons because there are many post to come and designs to be launched. So now I'm gonna teach you how to implement it on your blog.

How to put Demo / Download Button with Push Effect on Blogger:

• The First thing to do is to Login to your Blogger Account.
• Go to Templates, and Click Edit HTML.

• Then Find this code ]]></b:skin>, Then paste the below code above ]]></b:skin>.

/* CSS Button with Push Effect- from tronicflow.blogspot.com */
.button-push {
border: 0;
border-radius: 0;
outline: 0;
font-size: 18px;
background: rgb(0, 159, 209);
box-shadow: 0px 0px 1px #003F63,0px 1px 1px #0092C0,2px 1px 1px #003F63,1px 2px 1px #0092C0,3px 2px 1px #003F63,2px 3px 1px #0092C0,4px 3px 1px #003F63,3px 4px 1px #0092C0,5px 4px 1px #003F63,4px 5px 1px #0092C0,6px 5px 1px #003F63;
color: white;
white-space: nowrap;
padding: 9px 16px;
margin: 0 10px;
position: relative;
}
.button-push a{color:white}
.button-push a:hover{color:white}
.button-push:focus{background:rgb(2, 181, 238)}
.button-push:hover{
  background: rgb(2, 181, 238);
}
.button-push:active {
  box-shadow: 1px 0px 1px #003F63,0px 1px 1px rgb(0, 146, 192),2px 1px 1px #003F63,1px 2px 1px rgb(0, 146, 192),3px 2px 1px #003F63;
  @include transform(translate(3px, 3px));
   top:0px;
   right:-3px;
   bottom:-3px
}
.button-push:active:after {
  top: 3px;
  left: 3px;
}
/*-- CSS button CLosed --*/

• To use this awesome CSS Button, Just paste the code below on the post you want it to appear.

<span class="button-push"><b>Download Now</b></span>

Final Words:

If you have any
problems implementing this code, please just comment below and we'll answer you back as fast as we can. This button is really good so don't miss to use this and have a nice day. Thanks for Reading!