html - cssを使用してボタンを押す効果を追加する

Question

画像付きのボタンにボタンを押した効果を追加しようとしています。ここに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
}

効果はホバー時にのみ表示されます。クリックしたときに表示されるように変更するにはどうすればよいですか。のようなものを追加しました

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

クラスを .pressed on click に変更しました。しかし、それは機能していません。助言がありますか

Answer 1

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