我无法弄清楚是什么让html按钮元素看起来被推(右键单击一个html按钮,然后盘旋打开和关闭以查看我的意思)。
以下两个我从其他网站上提取的例子。第一个具有典型的按钮推动效果。第二个没有。
.button {
border:none 0;
background-color:Transparent; }
.button .l { background:url('img.gif') no-repeat 0 0;
padding-left:7px;
display:block;
height:32px; }
.button .c { background:url('img.gif') repeat-x 0 0;
display:block;
height:32px;
padding-top:7px; }
.button .r {
background:url('img.gif') no-repeat right top;
padding-right:7px;
display:block;
height:32px; }
和
.button {
background:#F0F0F0 url(img.gif) repeat-x scroll 0 0;
border:1px solid Black;
color:#333333;
font-size:12px;
height:20px;
padding-left:8px;
padding-right:8px; }
编辑:@mr双向飞碟,我想要一个在所有浏览器中看起来相同的按钮(即背景图像),但仍然表现得像具有推动效果的真实html按钮。我是否正确假设我需要javascript为此?推送状态的不同css?一个示例/教程将是很棒的
答案 0 :(得分:23)
使用
<input type="button" value="Click Me"/>
会自动像按钮一样,或者使用:hover和:active CSS伪类来获得你想要的东西......
a.likeAButton {
background-color:#67a0cf;
border:1px outset #2683cf;
color:#fff;
padding:3px 3px 3px 3px;
margin:1px;
text-decoration:none;
}
a.likeAButton:hover {
background-color:#5788af;
border:1px outset #2683cf;
color:#fcffdf;
padding:3px 3px 3px 3px;
margin:1px;
text-decoration:none;
}
a.likeAButton:active {
background-color:#67b4cf;
border:1px inset #1d659f;
color:#e0ffaf;
padding:4px 2px 2px 4px;
margin:1px;
text-decoration:none;
}
<a href="somepage.html" class="likeAButton">Fake Button</a>
答案 1 :(得分:-2)
您还可以为每个元素添加边框半径,例如a.likeabutton,a.likeabutton:hover和all。这将是一个很好的外观。如果我们可以将其设置为Button列表,那么它将具有更好的Navbar功能,我尝试了这一点,这些按钮的位置在最大化和恢复的borwser中保持不变。