Nút HTML Hiệu ứng "Đẩy"

Question

Tôi không thể tìm ra điều gì làm cho phần tử nút html có vẻ bị đẩy (nhấp chuột phải vào nút html và sau đó di chuột lên và tắt để xem ý tôi là gì).

hai ví dụ sau đây tôi đã lấy từ các trang web khác. đầu tiên có hiệu ứng push button điển hình. thứ hai thì không.

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

và

.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, tôi muốn có một nút đó sẽ trông giống nhau trong tất cả các trình duyệt nhưng vẫn cư xử như một nút html thực sự với push (tức là hình nền.) hiệu ứng. am i chính xác trong giả định rằng tôi sẽ cần javascript cho điều này? và css khác nhau cho trạng thái đẩy? một ví dụ/hướng dẫn sẽ được awesome

Answer 1

Hoặc sử dụng

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

mà sẽ tự động đóng vai trò như một nút, hoặc sử dụng: hover và: lớp học giả hoạt động CSS để có được những gì bạn muốn ...

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

bạn cũng có thể thêm bán kính đường viền cho mọi phần tử như a.likeabutton, a.likeabutton: hover và tất cả. wil này cho nó một cái nhìn tốt. Nếu chúng ta có thể làm cho nó giống như một danh sách các Button thì nó sẽ có một tính năng Navbar tốt hơn, tôi đã thử điều này mặc dù, vị trí của các nút này không còn giống nhau trong Maximized và restore borwser.