在jquery主页上的“下载”按钮的启发下，我创建了一个鼠标悬停效果的按钮。它使用所有浏览器的不透明选项。您可以在这里看到一个演示:JButton演示。

点击查看按钮的演示。

下载zip，包含所有包含的文件:JButton。

该按钮的样式由以下类组成:

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;}

我们有两个图像，左边和右边的按钮。根据文本的大小，按钮将扩展(最多200px)。

我还添加了一些文本阴影，但在IE中不起作用。

html非常简单:

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

这个特殊的角色是个问号，我只是为了好玩才加进去的。

享受吧!