My goal is to set backgrounds in two different CSS classes, ideally utilizing CSS3's multiple background feature. I aim to achieve this with minimal markup and ensure it is universally applicable.
For example:
CSS
.button {
display: block;
}
.green {
background-color: #87b400;
background: -moz-linear-gradient(top, #a4d400, #739e00);
}
.icon {
background-repeat: no-repeat;
}
.icon.add {
background-image: url('../img/icons/add.png');
}
HTML
<a href="#" class="button green icon add">add item</a>
<input type="submit" name="example" value="add item" class="button green icon add" />
<button type="submit" class="button green icon add">add item</button>
I am aware that I could approach it like this:
<a href="#" class="button green"><span class="icon add">add item</span></a>
However, I believe there might be a more efficient method that could not be applied within an input element.
I want to avoid the following approach:
.button.green.icon.add {
background: -moz-linear-gradient(top, #a4d400, #739e00),
url('../img/icons/add.png');
}
As handling multiple colors and icons would become quite cumbersome.