When working with HTML, adjusting the background-position of a div is simple:
.close:hover > .closebutt {
background-position: 0px -14px;
}
This ensures that the background-position changes only when its parent is hovered over.
Here is the original answer I provided prior to your question update:
I typically structure my HTML like this:
<a href="#" class="button">
<div class="glyph"></div>
<div class="text">Button text</div>
</a>
EDIT: as @Paul D. Waite mentioned in the comments, this HTML format is invalid in HTML4 since an a can only contain inline elements. To address this issue, we can adjust the structure by using span elements as children of the a. The CSS code remains similar, but we may need to add display: block if necessary.
<a href="#" class="button">
<span class="glyph"></span>
<span class="text">Button text</span>
</a>
and modify your CSS accordingly:
.button {
/* .. general style */
}
.button > .glyph {
/* .. general glyph style such as size or display: block */
background-image: url('..');
background-repeat: no-repeat;
background-position: left top;
}
.button > .text {
/* .. general text style like font-size or display: block */
text-decoration: none;
}
.button:hover > .glyph {
/* .. adjust glyph style upon button hover */
background-position: left bottom;
}
.button:hover > .text {
/* .. change text style on button hover */
text-decoration: underline;
}
This approach allows for easy styling modifications by adding a new class to the button:
<a href="#" class="button red">
<div class="glyph"></div>
<div class="text">Button text</div>
</a>
<a href="#" class="button gray">
<div class="glyph"></div>
<div class="text">Button text</div>
</a>
The corresponding CSS adjustments would be:
.button.red {
background-color: red;
}
.button.red > .text {
color: black;
}
.button.gray {
background-color: darkgray;
}
.button.gray > .text {
color: white;
}