使用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。但它没有用。任何建议

Answer 1

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