CSS : You Tube Style Silver Buttons

Nobody can be unaware of You Tube. It has a feature that is all inclusive for You Tube to its fall. Silver Buttons is the color of a button using any feature in You Tube . For example, the You Tube Load more and like,Share, Embed ,Help button is in the lobby.  Nowhere is this more button. We know how to use these buttons as we see appropriate. I am here to share, to go through this button, links, headings, etc. gave them to the notification messages.
These buttons are used to produce high gradient colors. These buttons are also set up an additional feature visible in all browsers .

Demo

Step 1. - In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > ChooseTemplate> Edit HTML > Click "Proceed"


Find The Below Code "]]></b:skin>"
Paste the Below Codes (Button CSS ,hover,active)

Button CSS :

.tgbutton {
color:#666 !important;
text-shadow:0 1px 0 #fff;border-color:#ccc #ccc #aaa!important;background-color:#e0e0e0 !important;-moz-box-shadow:inset 0 0 1px #fff;-ms-box-shadow:inset 0 0 1px #fff;-webkit-box-shadow:inset 0 0 1px #fff;box-shadow:inset 0 0 1px #fff;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fffafafa,EndColorStr=#ffdcdcdc);background-image:-moz-linear-gradient(top,#fafafa 0,#dcdcdc 100%);background-image:-ms-linear-gradient(top,#fafafa 0,#dcdcdc 100%);background-image:-o-linear-gradient(top,#fafafa 0,#dcdcdc 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fafafa),color-stop(100%,#dcdcdc));background-image:-webkit-linear-gradient(top,#fafafa 0,#dcdcdc 100%);background-image:linear-gradient(to bottom,#fafafa 0,#dcdcdc 100%);
height: 2.95em;
padding: 15px;
border: 1px solid;
outline: 0;
font-weight: bold;
font-size: 17px !important;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
width:90% ! Important;
text-decoration:none ! Important;
}

Button : Hover 

.tgbutton:hover {
color:#666 !important;border-color:#aaa #aaa #999 !important;-moz-box-shadow:0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff;-ms-box-shadow:0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff;box-shadow:0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff0f0f0,EndColorStr=#ffe6e6e6);background-image:-moz-linear-gradient(top,#f0f0f0 0,#e6e6e6 100%);background-image:-ms-linear-gradient(top,#f0f0f0 0,#e6e6e6 100%);background-image:-o-linear-gradient(top,#f0f0f0 0,#e6e6e6 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f0f0f0),color-stop(100%,#e6e6e6));background-image:-webkit-linear-gradient(top,#f0f0f0 0,#e6e6e6 100%);background-image:linear-gradient(to bottom,#f0f0f0 0,#e6e6e6 100%);
}

Button : Active 

.tgbutton:active {
border-color:#888 #aaa #ccc;-moz-box-shadow:inset 0 1px 5px rgba(0,0,0,0.25),0 1px 0 #fff;-ms-box-shadow:inset 0 1px 5px rgba(0,0,0,0.25),0 1px 0 #fff;-webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,0.25),0 1px 0 #fff;box-shadow:inset 0 1px 5px rgba(0,0,0,0.25),0 1px 0 #fff;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffc8c8c8,EndColorStr=#ffe6e6e6);background-image:-moz-linear-gradient(top,#c8c8c8 0,#e6e6e6 100%);background-image:-ms-linear-gradient(top,#c8c8c8 0,#e6e6e6 100%);background-image:-o-linear-gradient(top,#c8c8c8 0,#e6e6e6 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#c8c8c8),color-stop(100%,#e6e6e6));background-image:-webkit-linear-gradient(top,#c8c8c8 0,#e6e6e6 100%);background-image:linear-gradient(to bottom,#c8c8c8 0,#e6e6e6 100%)
}

HTML

<a class="tgbutton" href="#link">Text here  </a>

Customise

#link- Button link
Text Here -You can write to anything 


Thanks