HTML 按钮“推”效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/646719/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Button "Push" Effect
提问by scunliffe
i can't figure out what makes an html button element appear to be pushed (right click an html button and then hover on and off to see what i mean).
我不知道是什么让 html 按钮元素看起来被推动了（右键单击一个 html 按钮，然后悬停打开和关闭以查看我的意思）。
the following two examples i've taken from other websites. the first has the typical button push effect. the second does not.
以下两个示例是我从其他网站上获取的。第一个具有典型的按钮推动效果。第二个没有。
.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; }
and
和
.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; }
EDIT: @ mr skeet, i want a button that will look the same in all browsers (ie. background image) but still behave like a real html button with the push effect. am i correct in assuming that i'll need javascript for this? and different css for the push state? an example/tutorial would be awesome
编辑：@skeet 先生，我想要一个在所有浏览器中看起来都一样的按钮（即背景图像），但仍然表现得像一个真正的 html 按钮，具有推送效果。我是否正确假设我需要为此使用 javascript？和不同的 css 用于推送状态？一个例子/教程会很棒
回答by scunliffe
Either use
要么使用
<input type="button" value="Click Me"/>
which will automatically act like a button, or use the :hover and :active CSS pseudo classes to get what you want...
它会自动像一个按钮一样，或者使用 :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>
回答by Amit
you can also add border radius to every element such as a.likeabutton, a.likeabutton:hover and all. this wil give it a good look. If we can make it like a list of Button then it will have a better Navbar feature, I tried this though, it position of these buttons does no remain same in Maximized and restored borwser.
您还可以为每个元素添加边框半径，例如 a.likeabutton、a.likeabutton:hover 等。这将给它一个很好的外观。如果我们可以让它像一个按钮列表，那么它将具有更好的导航栏功能，不过我试过了，这些按钮的位置在最大化和恢复的浏览器中不会保持不变。
