This can easily be done using basic css properties. Here I'm going to style a div element. Here is the code.
<html>
<head>
<style type="text/css" rel="stylesheet">
.button-div{
/*set geometric properties of the div*/
width: 100px;
height: 20px;
padding: 3px;
border: 2px solid #ccc;
-webkit-border-radius: 12px;
/*style the text*/
text-align:center;
font-family:Helvetica, sans-serif;
font-weight:bold;
color: white;
/*style the div*/
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(105, 105, 105, 0.8)), to(rgba(128, 0, 0, .9)));
border-color:brown;
}
</style>
</head>
<body>
<div class="button-div">
Button
</div>
</body>
<html>
This work really nicely on Chrome. You might must make any necessary modifications in order to get the same appearance in other browsers such as firefox. I'm not sure weather firefox support gradient but you can certainly get the rounded corners using -moz-border-radius . Hope this will help some one out there.
