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

Why are all your properties missing the : symbol/operator? — hjpotter92
– hjpotter92, Commented Jan 27, 2013 at 4:37

Matt Steele · Accepted Answer · 2013-01-27 04:41:45Z

5

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

answered Jan 27, 2013 at 4:41

Matt Steele

6553 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding button pressed effect using css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related