HTML-Button "Push" -Effekt

Question

Ich kann nicht herausfinden, was ein HTML-Button-Element scheint zu schieben (mit der rechten Maustaste auf einen HTML-Button und dann auf und ab, um zu sehen, was ich meine).

Die folgenden zwei Beispiele habe ich von anderen Websites genommen. das erste hat den typischen Knopfdruckeffekt. die zweite nicht.

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

und

.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, möchte ich eine Schaltfläche, die in allen Browsern gleich aussehen, aber verhalten sich immer noch wie eine echte HTML-Taste mit dem Stoß (dh Hintergrundbild.) bewirken. bin ich richtig in der Annahme, dass ich Javascript dafür brauche? und verschiedene CSS für den Push-Zustand? ein Beispiel/Tutorial wäre genial

Answer 1

Entweder verwenden

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

, die wie eine Taste automatisch handeln, oder verwenden Sie das: schweben und: aktiv CSS Pseudo-Klassen zu bekommen, was Sie wollen ...

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

Sie können auch jedem Element einen Rahmenradius hinzufügen, z. B. a.likeabutton, a.likeabutton: hover und all. Das wird es gut aussehen lassen. Wenn wir es wie eine Liste von Button machen können, dann wird es eine bessere Navbar-Funktion haben, ich habe es versucht, aber die Position dieser Buttons bleibt nicht gleich in maximiertem und wiederhergestelltem Browser.