Adding button pressed effect using css

Question

I am trying to add button pressed effect to a button with an image. Here is the css

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
}

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

   .pressed { 
      position:relative
      top 3px
      color #fqq
      box-shadow none
      -moz-box-shadow none
      -webkit-box-shadow none
    }

and changed the class to .pressed on click. But it is not working. Any suggestions

Answer 1

input.happy:active {
     background-color:red
}