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>