Html5 button image state

Question

I have a button and I'm trying to apply this image to my background, green - the state is off, and yellow - the state of the click. Can I use this image where both states are in the same file or do I need to separate them? What is the standard for this situation and how does css work?

<button>click me</button>
button {
    background-image:url('button.png');
}

Answer 1

Yes, you can use the: focus button for the click state. Just declared it in css.

<button>Click me</button>

CSS example:

button {
    background:yellow;
    padding:12px 40px;
    border:1px solid yellow;
    color:#454545;
}
button:focus {
    background:blue;
}

Just change the color value to the background using the path to the background image.

Demo

Answer 2

Yes, you can definitely use them. They are called CSS Sprites.

Here is the fiddle

button{
    width:196px;
    height:64px;
    background-image:url("http://i.stack.imgur.com/BSVeQ.gif");
    background-repeat:no-repeat;
}
button:active{
    background-position:0px -64px;
}

Answer 3

, (, FirstBackground.png SecondBackground.png). CSS:

button {
  background: url("/images/FirstBackground.png") no-repeat bottom;
}

button:active { 
    background: url(/images/SecondBackground.png) no-repeat bottom; 
} 

, .

Answer 4

, ... ,

Html:

<button> </button>  <!-- Without the "Click Me" -->

Css:

button {
    background-image:url('http://i.stack.imgur.com/BSVeQ.gif');
    height:64px;
    width:196px;
}

button:active {background-position: 0 -64px; }

128 , 64px ...

DEMO

Answer 5

CSS Sprites

, , , CSS- . , CSS sprites , CSS-Tricks: http://css-tricks.com/css-sprites/

?

I assume that the sample image in your question is a bit contrived. If not, I would suggest not using background images for this at all. CSS is very powerful today, and you can use it to create very nice buttons that don't require images at all. If you want to use some simple background colors, gradient, rounded corners, etc. - all this is possible only with CSS. In addition, the text / CSS button solution increases its accessibility.