Facebook style buttons

Makes facebook style buttons using CSS3 gradients

by Jimmy Sawczuk

HTML

<input type="button" class="button3d" value="Green's awesome">

<input type="button" class="button3d button3d_blue" value="Do it in blue">

<input type="button" class="button3d button3d_silver" value="Silver bullet!">

CSS

/* style to generate facebook style green or blue buttons */

.button3d { background-color: #69A74E; background-position: 0 -96px; color: white; box-shadow: 0 1px 0 rgba(0, 0, 0, .1); -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1); cursor: pointer; padding: 3px 6px 4px; border: 1px solid #999; border-color: #3B6E22 #3B6E22 #2C5115; font-weight: bold; font-size: 13px; font-family: "Lucida Grande", Tahoma, Verdana, sans-serif; background: #98C286; background: -moz-linear-gradient(top, #98C286 0%, #73AC59 15%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#98C286), color-stop(15%,#73AC59)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#98C286', endColorstr='#73AC59',GradientType=0 ); }

.button3d_blue {
  background-color: #627AAD; background: -moz-linear-gradient(top, #627AAD 0%, #3B5998 29%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#627AAD), color-stop(29%,#3B5998)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627AAD', endColorstr='#3B5998',GradientType=0 ); border-color: #29447E #29447E #1A356E; 
}

.button3d_silver {
    background-color: #dedede; color: black; background: #f2f5f6; background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); border-color: #999 #999 #777;
}

/* when button is pressed */
.button3d:active { background: #69A74E; }
.button3d_blue:active { background: #3B5998; }
.button3d_silver:active { background: #dedede; }

/* small text */
.button3d_small { font-size: 85%; }