CSS buttons

Today I converted all download links on this site, from using Javascript + CSS to style them to CSS-only (with a background image). I kept some CSS from the JSbuttons installation, because that is how I still want them to look. In case you're interested, here's the CSS:

General CSS:

.mybutton {
   display: block;
   position: relative;
   float: left;
   background: #aaa;
   padding: 5px;
   margin-top: 0px;
   margin-bottom: 10px;
   border: 1px solid gray;
   border-radius: 5px;
   text-decoration: none;
   text-align: center;
   color: #fff;
   font-style: normal;
   font-weight:bold;
   line-height: 15px;
   cursor: pointer;
}

.mybutton:active { background: #444; }
.mybutton:hover { background: #eaeaea; }

.mybutton.blue { background: #2ae; }
.mybutton.blue:hover { background: #05b; }

.mybutton.green { background: #5b5; }
.mybutton.green:hover { background: #282; }

.mybutton.pink { background: #e1a; }
.mybutton.pink:hover { background: #a0a; }

.mybutton.yellow { background: #dd3; }
.mybutton.yellow:hover { background: #aa0; }

.mybutton.black { background: #222; }
.mybutton.black:hover { background: #000; }

.mybutton[class] {
   background-image: url(%pathto(button-shade.png)%);
   background-position: bottom;
}

On a per page basis:

a.mybutton {
   height: 16px;
   width: 100px;
   color: #eeee00;
}

a:hover.mybutton { color:#ff5500; }


And this is the background image (inside the border):

Normal link:	.mybutton link:
Go to Apple	Go to Apple
<a href="http://www.apple.com/">Go to Apple</a>	<a href="http://www.apple.com/" class="mybutton blue">Go to Apple</a>