Botón HTML Efecto "Empujar"

Question

No puedo entender qué hace que un elemento de botón html parezca estar presionado (haga clic con el botón derecho en un botón html y luego pase el mouse por dentro y fuera para ver lo que quiero decir).

los siguientes dos ejemplos que he tomado de otros sitios web. el primero tiene el típico efecto push button. el segundo no.

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

y

.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 al plato, quiero un botón que tendrá el mismo aspecto en todos los navegadores, pero todavía se comportan como un botón HTML real con el empuje (es decir, la imagen de fondo.) efecto. ¿Estoy en lo correcto al asumir que necesitaré javascript para esto? y diferentes CSS para el estado push? un ejemplo/tutorial sería impresionante

Answer 1

De cualquier uso

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

que actuará automáticamente como un botón o utilizar el: hover y: clases seudo activa CSS para conseguir lo que quiere ...

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

también puede agregar un radio de borde a cada elemento como a.likeabutton, a.likeabutton: hover y todos. esto lo dará una buena mirada. Si podemos hacer que sea como una lista de botones, entonces tendrá una mejor función de barra de navegación, probé esto sin embargo, la posición de estos botones no permanece igual en Borwser maximizado y restaurado.