title: HTML Button "Push" Effect
body: <p>i can't figure out what makes an html button element appear to be pushed (right click an html button and then hover on and off to see what i mean). </p>
  
  <p>the following two examples i've taken from other websites. the first has the typical button push effect. the second does not.</p>
  
  <pre><code>.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; }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>.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; }
  </code></pre>
  
  <p>EDIT: @ mr skeet, i want a button that will look the same in all browsers (ie. background image) but still behave like a real html button with the push effect. am i correct in assuming that i'll need javascript for this? and different css for the push state? an example/tutorial would be awesome</p>