CSS button with hover effect

Inspired by the nice download button on the jquery homepage I created this button with a hover effect. It uses opacity options for all browsers. You can see a demo here: JButton Demo

Click to see a DEMO of the button

Download the zip with all the containing files here: JButton

The style for the button consists of the following classes:

a.jbutton{
 background: transparent url(buttonleft.png) no-repeat top left;
 display: block;
 float: left;
 font: 22px "Tahoma";
 line-height: 49px; /* This value + 8px should equal height of the button */
 height: 57px;
 padding-left: 9px; /* Left part of image */
 text-decoration: none;
 outline:none;
 color:white;
 cursor:pointer;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
 opacity: 1;
 -moz-opacity: 0.99;
}
a.jbutton span{
 background: transparent url(buttonright.png) no-repeat top right;
 display: block;
 padding: 4px 9px 6px 0; /*Set right padding here to 'padding-left' value above*/
 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
a.jbutton:link, a.jbutton:visited{
 color: #F0F0F0; /* button text color */
}
a.jbutton:hover{
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
 opacity: 0.8;
 -moz-opacity: 0.8;
}
a.jbutton:hover span{
 color: #FFFFFF;
}

We have two images, the left and the right side of the button. Depending on the size of the text, the button will expand (up to 200px).

I also added some text shadow which will not work in IE though.

The html is very simple:

<a class="jbutton"><span> &#157; Ask a question</span></a>

The special character is a the question mark which I just added for fun.

Enjoy!