![css 按钮悬停样式](https://img-blog.csdnimg.cn/img_convert/590b4bfc4bbecbfb4a7104f010c442a3.png)
css 按钮悬停样式
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
受jquery主页上漂亮的下载按钮的启发,我创建了具有悬停效果的按钮。 它为所有浏览器使用不透明度选项。 您可以在此处查看演示: JButton演示
![jbuttonscreen jbuttonscreen](https://img-blog.csdnimg.cn/img_convert/4b06407d4bb14fefba8eb08dac2383f5.png)
Download the zip with all the containing files here: JButton
在此处下载包含所有包含文件的zip: 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).
我们有两个图像,分别在按钮的左侧和右侧。 根据文本的大小,按钮将展开(最大200px)。
I also added some text shadow which will not work in IE though.
我还添加了一些文本阴影,但在IE中无法使用。
The html is very simple:
html非常简单:
<a class="jbutton"><span>  Ask a question</span></a>
The special character is a the question mark which I just added for fun.
特殊字符是我刚刚添加的一个问号。
Enjoy!
请享用!
翻译自: https://tympanus.net/codrops/2009/08/31/css-button-with-hover-effect/
css 按钮悬停样式