HTML-кнопка «Push» Effect

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

EDIT: @ мр тарелочкам, я хочу кнопку, которая будет выглядеть одинаково во всех браузерах, но по-прежнему ведут себя как настоящая кнопка HTML с нажимом (т.е. фоновое изображение.) эффект. Правильно ли я предполагаю, что для этого мне понадобится javascript? и разные css для состояния push? пример/учебник будет удивительным

Answer 1

Либо использовать

<input type="button" value="Click Me"/> 

, который будет автоматически действовать как кнопка, или используйте: парить и: активный 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 и все. это будет хорошо выглядеть. Если мы сможем сделать его похожим на список Button, тогда у него будет лучшая функция Navbar, я попытался это сделать, но положение этих кнопок не останется таким же в Maximized и восстановленном borwser.