CSS Push Buttons Like Css-Tricks

Css-tricks, every css-lover is familiar with this site and also with the owner of this site, that is Chris Coyer. Chris coyer discuss about web-designing and about Css properties in his site, and frankly I admit it that I've learnt lot of new things in his site.

Among them one is the Css 3D push buttons. This buttons are purely powered by Css and they make 3D push effect when clicked on it. But my question is why all the good things happen on other sites only which are not hosted on blogger platform. And while finding the answer to this question incidently I redesigned it specifically for blogspot users. So here we go through the article, we will now add this into your blogger sites.
Enjoy the posts by taking your time and see the fun in this tutorial.

For The Beginner Bloggers

Before diving into deep of the tutorial, first of all you must learn how to imply this button effect in your blogger.

Step#1

Open Blogger dashboard → Template → Html editor 

Now search ]]></b:skin>  and paste the css code of button just before it.

Step#2

In this step you will have to add Html element with class="button", it can be elements such as div, span, button, abbr. To clear your confusion see the below given example and remember the points mentioned.

Example:
<span>Demo</span>
<button>Demo</button>

Remember:
If you want to achieve button effect then you will have to add class='button' to the element which you want to work as push-button.

See The live Demo Working Here

Yeah! I have embedded live demo in my posts, so that you can learn some basics of this push buttons. Remember that without playing with codes you are not going to learn so here is the small playground specifically for you.

 

4 Different Push Buttons

1. Css for Light Blue Button

/* Light Blue Button */
.button {display:inline-block;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;color:white;position: relative;}
.button: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;top:0px;right:-3px;bottom:-3px;}
.button:hover{background: rgb(2, 181, 238);}
.button a, .button a:hover{color:white}
.button:active:after{top:3px;left:3px}

2. Css for Dark Blue Button

.button {border: 0;border-radius: 0;outline: 0;font-size: 18px;background: #4e68c7;box-shadow: 1px 0px 1px #203891,0px 1px 1px #3852b1,2px 1px 1px #203891,1px 2px 1px #3852b1,3px 2px 1px #203891,2px 3px 1px #3852b1,4px 3px 1px #203891,3px 4px 1px #3852b1,5px 4px 1px #203891,4px 5px 1px #3852b1,6px 5px 1px #203891;color: #FFF;white-space: nowrap;padding: 9px 16px;margin: 0 10px;
position: relative;display:inline-block;}
.button:hover {background: #3d57b4;}
.button:active {box-shadow: 1px 0px 1px #203891,0px 1px 1px #3852b1,2px 1px 1px #203891,1px 2px 1px #3852b1,3px 2px 1px #203891;top: 0px;right: -3px;bottom: -3px}
.button a,.button a:hover{color:white}
.button:active:after {top: 3px;left: 3px;}

3. Css For Orange Button

.button{border: 0;border-radius: 0;outline: 0;font-size: 18px;background: #FF6124;box-shadow: 0px 0px 1px #AF3F14,0px 1px 1px #C94921,2px 1px 1px #AF3F14,1px 2px 1px #C94921,3px 2px 1px #AF3F14,2px 3px 1px #C94921,4px 3px 1px #AF3F14,3px 4px 1px #C94921,5px 4px 1px #AF3F14,4px 5px 1px #C94921,6px 5px 1px #AF3F14;color: #FFF;white-space: nowrap;padding: 9px 16px;margin: 0 10px;position: relative;display:inline-block;}
.button:hover {background: #FF4700;}
.button:active {box-shadow: 0px 0px 1px #AF3F14,0px 1px 1px #C94921,2px 1px 1px #AF3F14,1px 2px 1px #C94921,3px 2px 1px;top: 0px;right: -3px;bottom: -3px;}
.button:active:after {top: 3px;left: 3px;}
.button a,.button a:hover{color:white}

4. Css For Yellow Button

/* CSS Button - Yellow */
.button {border: 0;border-radius: 0;outline: 0;font-size: 18px;background: #E6CA00;box-shadow: 0px 0px 1px #B19525,0px 1px 1px #D1B832,2px 1px 1px #B19525,1px 2px 1px #D1B832,3px 2px 1px #B19525,2px 3px 1px #D1B832,4px 3px 1px #B19525,3px 4px 1px #D1B832,5px 4px 1px #B19525,4px 5px 1px #D1B832,6px 5px 1px #B19525;color: #FFF;white-space: nowrap;padding: 9px 16px;margin: 0 10px;position: relative;display:inline-block;}
.button:hover {background: #F3D605;}
.button:active {box-shadow: 0px 0px 1px #B19525,0px 1px 1px #D1B832,2px 1px 1px #B19525,1px 2px 1px #D1B832,3px 2px 1px #B19525;top: 0px;right: -3px;bottom: -3px}
.button:active:after {top: 3px;left: 3px;}
.button a,.button a:hover{color:white}

Final Words

There are lots of peoples who might have already written on this topic, but one thing in common among them was they just copied the whole thing from chris coyer and pasted it in their sites, making only little changes to the stylesheet.

But think out of box, like you are the user and have no knowledge of codes and all then what? Even if you don't like the color of the button then also you'll have to use that color, as you have no choice. And that's why I have provided this push buttons in 4 different colors so that our users can choose their respective colors.

Note: yeah in the end I want to tel you that if you need a push button for you with some other color then freely tell me by leaving your comments below, I'll be delighted to help you.