Search code examples
htmlcssbuttonbackground-imageflip

Flip Button Background Image Vertically

I'm using CSS to style my button which has a background Image. I need a press effect. so I tried flopping my button vertically when it is active, as demonstrated in the fiddle.

http://jsfiddle.net/krishnathota/xzBaZ/10/

I'm able to Flip the image but along with the whole button. How can I only flip the background Image. ??

I have to write in another class other than .button:active or what?? Plaease help

Please check the Third and Fourth buttons and flip the BackgroundImage. The Firse and second buttons contain a <img> I do not want it to be flipped.

if this is not cross browser supported, Can you tell me how to change the background when button is active without changing the background color?

Solution

  • Add active state only for image

    .button:active img{
    /*Vertical Flip background img*/
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipv; /*IE*/
    filter: flipv; /*IE*/
    top: 1px; position: relative;
    /*-webkit-transform: translateY(1px);-moz-transform: translateY(1px);*/
  }

    DEMO

    Here is the best tutorial for flipping the elements separately

    http://www.sitepoint.com/css3-transform-background-image/