HTML 按钮 "Push"效果

Question

我无法弄清楚是什么让 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; }

编辑:@ 双向飞碟先生，我想要一个在所有浏览器中看起来都一样的按钮(即背景图像)，但仍像具有推送效果的真正 html 按钮一样工作。我假设我为此需要 javascript 是否正确？和不同的 css 用于推送状态？一个例子/教程会很棒

Answer 1

要么使用

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