I'm trying to add a bunch of different color classes to my buttons and allow additional classes to be added arbitrarily. All of these should darken on hover. It seems tedious to write button.(color):hover rules for every single color, so I've written this such that the :after section gets darker and covers the button background.
http://jsfiddle.net/kjpczL5w/1/
However, I can't get the :after section to fit between the button's text and its background as desired. At the moment, it also shades the text. The idea here is to remove any tedious part of adding a new button element or a new button color class, so I'd like to avoid additional html or additional css rules for each color. Ideas?
button {
border: 0;
padding: 1em;
position: relative;
cursor: pointer;
background: none;
}
button:after {
content: " ";
transition: background-color .3s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
button:hover:after { background-color: rgba(0, 0, 0, 0.3); }
button.green { background-color: #6c842e; color: #ffffff; }
button.red { background-color: #ff4444; color: #ffffff; }<button>Boop</button>
<button class="green">Boop</button>
<button class="red">Boop</button>
