My button has a unique design where it consists of a sprite set as the background image of a div. The sprite sheet is laid out horizontally, and I have also scaled down the source image to fit the div.
.button {
background: url(sprite.png);
background-size: auto 100%;
width: 100px;
height: 100px;
background-position: 0px 50%;
}
.play {
background-position: 0px;
}
.pause {
background-position: -100px;
}
When the button is clicked, I want it to shrink slightly like this:
.button:active {
background-size: auto 95%;
}
The issue is that currently the button shrinks towards the left edge. How can I center the image while maintaining the position offset for the sprite?
Ideally, I am looking for a solution that adapts to changes in size, allowing the same style to work even if the dimensions of the div are altered. However, I am struggling to achieve the desired effect with manual adjustments like:
.play:active {
background-position: 3px 50%;
}
.pause:active {
background-position: -97px 50%;
}
Edit
I have corrected some minor errors in the quoted code.