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

РЕДАКТИРОВАТЬ: @ mrkeet, я хочу кнопку, которая будет выглядеть одинаково во всех браузерах (т.е. фоновое изображение), но при этом будет вести себя как настоящая кнопка HTML с эффектом push Правильно ли я считаю, что мне понадобится JavaScript для этого? и разные css для состояния push? пример / учебник будет классным

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>

Answer 2

Вы также можете добавить радиус границы для каждого элемента, такого как a.likeabutton, a.likeabutton: hover и все. это даст ему хороший вид. Если мы сможем сделать его похожим на список кнопок, то у него будет улучшенная функция Navbar, хотя я попробовал это сделать, но положение этих кнопок не остается неизменным в развернутом и восстановленном окне.