title: Adding button pressed effect using css
body: <p>I am trying to add button pressed effect to a button with an image. Here is the css</p>
  
  <pre><code>input.happy {
     background-image url(/img/happy.png)
     background-color transparent
     background-repeat no-repeat
     border none
     width 64px
     height 64px
     margin 10px
    cursor pointer
    border-radius:8px
    -moz-border-radius:8px
    -webkit-border-radius:8px
    box-shadow: 0px 3px 5px #000
    -moz-box-shadow: 0px 3px 5px #000
    -webkit-box-shadow: 0px 3px 5px #000
  }
  
  input.happy:hover { 
    position:relative
    top 3px
    color #fqq
    box-shadow none
    -moz-box-shadow none
    -webkit-box-shadow none
  }
  </code></pre>
  
  <p>The effect is shown only on hover. How can I change it so that it is shown when it is clicked. I added something like </p>
  
  <pre><code>   .pressed { 
        position:relative
        top 3px
        color #fqq
        box-shadow none
        -moz-box-shadow none
        -webkit-box-shadow none
      }
  </code></pre>
  
  <p>and changed the class to .pressed on click. But it is not working. Any suggestions</p>