Pulsante HTML Effetto "Push"

Question

Non riesco a capire cosa fa apparire un elemento del pulsante html da premere (fare clic con il pulsante destro del mouse su un pulsante html e quindi passare sopra e disattivare per vedere cosa intendo).

i seguenti due esempi presi da altri siti Web. il primo ha il tipico effetto di pulsante. il secondo 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; } 

e

.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, voglio un pulsante che lo stesso aspetto in tutti i browser, ma ancora comportarsi come un vero e proprio pulsante HTML con la spinta (cioè immagine di sfondo.) effetto. ho ragione nel presupporre che avrò bisogno di javascript per questo? e diversi css per lo stato push? un esempio/esercitazione sarebbe impressionante

Answer 1

usare sia

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

che verrà automaticamente agire come un pulsante, o utilizzare il: hover e: classi pseudo attiva CSS per ottenere quello che vuoi ...

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

È inoltre possibile aggiungere raggio di bordo a ogni elemento come a.likeabutton, a.likeabutton: hover e tutti. questo ti darà una buona occhiata. Se riusciamo a farlo come un elenco di Button, allora avremo una migliore funzionalità di Navbar, ho provato a farlo, ma la posizione di questi pulsanti non rimane la stessa in Borwser ingrandito e ripristinato.