CSS Buttons

Here is a simple way to make your buttons through css so that they can use the overall look and feel of your site - without having to use photoshop.

Again I am taking advantage of the customized list option, so this is especially useful if you are doing UI for an application with multiple pages/buttons. Play around with colors, border colors and margins as you need to suit your site. Of course, you could always use a background image with a gradient to make it even more stylish - See the Portlets in CSS (2) example of how I use a background image with gradient.

Here is the CSS
#button {
list-style-type: none;
margin: 0;
padding: 0;
}
#button LI {
display:block;
float:left;
font-weight: normal;
text-align: center;
}
#button LI A {
color: #4f6b72;
font-size: 11px;
font-weight:bold;
font-family: arial, helvetica, sans;
text-decoration: none;
border: 1px solid #4f6b72;
padding: 5px 15px 5px 15px;
margin: 0 0 10px 0;
background-color: #cae8ea;
}
#button LI A:hover, #button2 LI A:active {
background-color: #4f6b72;
font-weight:bold;
color:#ffffff;
text-decoration: none;
}

Here is the list:
<ul id="button">
<li><a href="">Submit</a></li>
<li><a href="">Reset</a></li>
</ul>