Here are a set of photoshop style buttons just using CSS that will work in most modern browsers. As you can imagine there are some issues with some of the early versions of IE.

This is what they should look like (obviously the hover doesn’t work because this is just an image):

CSS buttons

These buttons are done purely using CSS:

I’ve used a number of the new CSS3 features, such as rounded corners, box shadow inset for the shiny bit at the top of the button and gradients to accommodate as many browsers as possible.

Red Button:

    .redBt{
        border:1px solid #880000;
        -webkit-box-shadow: inset 0px 1px 0px 0px #ffb7b7;
        -moz-box-shadow: inset 0px 1px 0px 0px #ffb7b7;
        box-shadow: inset 0px 1px 0px 0px #ffb7b7;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        background: #c10000; /* Old browsers */
        background: -moz-linear-gradient(top, #ffb7b7 0%, #f45d5d 2%, #c10000 98%, #d65c5c 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb7b7), color-stop(2%,#f45d5d), color-stop(98%,#c10000), color-stop(100%,#d65c5c)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #ffb7b7 0%,#f45d5d 2%,#c10000 98%,#d65c5c 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #ffb7b7 0%,#f45d5d 2%,#c10000 98%,#d65c5c 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #ffb7b7 0%,#f45d5d 2%,#c10000 98%,#d65c5c 100%); /* IE10+ */
        background: linear-gradient(top, #ffb7b7 0%,#f45d5d 2%,#c10000 98%,#d65c5c 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f45d5d', endColorstr='#c10000',GradientType=0 ); /* IE6-9 */
        color:#FFFFFF;
        padding:10px 15px;
        font-weight:bold;
    }
    .redBt:hover{
        -webkit-box-shadow: inset 0px 1px 0px 0px #d65c5c;
        -moz-box-shadow: inset 0px 1px 0px 0px #d65c5c;
        box-shadow: inset 0px 1px 0px 0px #d65c5c;
        background: #f45d5d; /* Old browsers */
        background: -moz-linear-gradient(top, #d65c5c 0%, #c10000 2%, #f45d5d 98%, #ffb7b7 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d65c5c), color-stop(2%,#c10000), color-stop(98%,#f45d5d), color-stop(100%,#ffb7b7)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #d65c5c 0%,#c10000 2%,#f45d5d 98%,#ffb7b7 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #d65c5c 0%,#c10000 2%,#f45d5d 98%,#ffb7b7 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #d65c5c 0%,#c10000 2%,#f45d5d 98%,#ffb7b7 100%); /* IE10+ */
        background: linear-gradient(top, #d65c5c 0%,#c10000 2%,#f45d5d 98%,#ffb7b7 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c10000', endColorstr='#f45d5d',GradientType=0 ); /* IE6-9 */
        color:#FFFFFF;
    }

Green Button:

.greenBt{
        border:1px solid #608D09;
        -webkit-box-shadow: inset 0px 1px 0px 0px #e7ffb5;
        -moz-box-shadow: inset 0px 1px 0px 0px #e7ffb5;
        box-shadow: inset 0px 1px 0px 0px #e7ffb5;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        background: #71a60b; /* Old browsers */
        background: -moz-linear-gradient(top, #e7ffb5 0%, #a7dd35 2%, #71a60b 98%, #9bd119 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7ffb5), color-stop(2%,#a7dd35), color-stop(98%,#71a60b), color-stop(100%,#9bd119)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #e7ffb5 0%,#a7dd35 2%,#71a60b 98%,#9bd119 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #e7ffb5 0%,#a7dd35 2%,#71a60b 98%,#9bd119 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #e7ffb5 0%,#a7dd35 2%,#71a60b 98%,#9bd119 100%); /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7dd35', endColorstr='#71a60b',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, #e7ffb5 0%,#a7dd35 2%,#71a60b 98%,#9bd119 100%); /* W3C */
        color:#FFFFFF;
        padding:10px 15px;
        font-weight:bold;
    }
    .greenBt:hover{
        -webkit-box-shadow: inset 0px 1px 0px 0px #9bd119;
        -moz-box-shadow: inset 0px 1px 0px 0px #9bd119;
        box-shadow: inset 0px 1px 0px 0px #9bd119;
        background: #a7dd35; /* Old browsers */
        background: -moz-linear-gradient(top, #9bd119 0%, #71a60b 2%, #a7dd35 98%, #e7ffb5 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9bd119), color-stop(2%,#71a60b), color-stop(98%,#a7dd35), color-stop(100%,#e7ffb5)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #9bd119 0%,#71a60b 2%,#a7dd35 98%,#e7ffb5 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #9bd119 0%,#71a60b 2%,#a7dd35 98%,#e7ffb5 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #9bd119 0%,#71a60b 2%,#a7dd35 98%,#e7ffb5 100%); /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#71a60b', endColorstr='#a7dd35',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, #9bd119 0%,#71a60b 2%,#a7dd35 98%,#e7ffb5 100%); /* W3C */
        color:#FFFFFF;
    }

Blue Button:

.blueBt{
        border:1px solid #458aba;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: inset 0px 1px 0px 0px #e6faff;
        -moz-box-shadow: inset 0px 1px 0px 0px #e6faff;
        box-shadow: inset 0px 1px 0px 0px #e6faff;
        background: #0880a7; /* Old browsers */
        background: -moz-linear-gradient(top, #e6faff 0%, #70cfee 2%, #0880a7 98%, #6cb2e2 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6faff), color-stop(2%,#70cfee), color-stop(98%,#0880a7), color-stop(100%,#6cb2e2)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #e6faff 0%,#70cfee 2%,#0880a7 98%,#6cb2e2 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #e6faff 0%,#70cfee 2%,#0880a7 98%,#6cb2e2 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #e6faff 0%,#70cfee 2%,#0880a7 98%,#6cb2e2 100%); /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#70cfee', endColorstr='#0880a7',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, #e6faff 0%,#70cfee 2%,#0880a7 98%,#6cb2e2 100%); /* W3C */
        color:#FFFFFF;
        padding:10px 15px;
        font-weight:bold;
    }
    .blueBt:hover{
        -webkit-box-shadow: inset 0px 1px 0px 0px #6cb2e2;
        -moz-box-shadow: inset 0px 1px 0px 0px #6cb2e2;
        box-shadow: inset 0px 1px 0px 0px #6cb2e2;
        background: #70cfee; /* Old browsers */
        background: -moz-linear-gradient(top, #6cb2e2 0%, #0880a7 2%, #70cfee 98%, #e6faff 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6cb2e2), color-stop(2%,#0880a7), color-stop(98%,#70cfee), color-stop(100%,#e6faff)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #6cb2e2 0%,#0880a7 2%,#70cfee 98%,#e6faff 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #6cb2e2 0%,#0880a7 2%,#70cfee 98%,#e6faff 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #6cb2e2 0%,#0880a7 2%,#70cfee 98%,#e6faff 100%); /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0880a7', endColorstr='#70cfee',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, #6cb2e2 0%,#0880a7 2%,#70cfee 98%,#e6faff 100%); /* W3C */
        color:#FFFFFF;
    }

Grey Button:

.greyBt{
        border:1px solid #a9a9a9;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
        -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
        box-shadow: inset 0px 1px 0px 0px #ffffff;
        background: #cccccc; /* Old browsers */
        background: -moz-linear-gradient(top, #ffffff 0%, #efefef 2%, #cccccc 98%, #dddddd 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(2%,#efefef), color-stop(98%,#cccccc), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 2%,#cccccc 98%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #ffffff 0%,#efefef 2%,#cccccc 98%,#dddddd 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #ffffff 0%,#efefef 2%,#cccccc 98%,#dddddd 100%); /* IE10+ */
        background: linear-gradient(top, #ffffff 0%,#efefef 2%,#cccccc 98%,#dddddd 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
        color:#333333;
        padding:10px 15px;
        font-weight:bold;
    }
    .greyBt:hover{
        -webkit-box-shadow: inset 0px 1px 0px 0px #dddddd;
        -moz-box-shadow: inset 0px 1px 0px 0px #dddddd;
        box-shadow: inset 0px 1px 0px 0px #dddddd;
        background: #efefef; /* Old browsers */
        background: -moz-linear-gradient(top, #dddddd 0%, #cccccc 2%, #efefef 98%, #ffffff 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(2%,#cccccc), color-stop(98%,#efefef), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #dddddd 0%,#cccccc 2%,#efefef 98%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #dddddd 0%,#cccccc 2%,#efefef 98%,#ffffff 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #dddddd 0%,#cccccc 2%,#efefef 98%,#ffffff 100%); /* IE10+ */
        background: linear-gradient(top, #dddddd 0%,#cccccc 2%,#efefef 98%,#ffffff 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */
        color:#333333;
    }