CSS button use of .hover for different buttons - css

Question

This is the top part:
button {
background-color: gray;
color: #fff;
border: none;
border-radius: 3px;
padding: 3px 10px;
cursor: pointer;
min-width: 1%;
min-height: 30px;
margin: 1px 0;
font-size: 16;
font-weight: bold;
box-shadow: 4px 4px 2px 0px #333333;
}
.blue-btn {
background-color: #337AB7;
}
.green-btn {
background-color: #008000;
}
.red-btn {
background-color: #FF0000;
}
Here comes my problem…..
.button:hover {
background-color: #3e8e41;
box-shadow: 0px 0px 0px 0px;
}
This one only work if the class is button (it does not work for blue/green/red buttons)
So I tried this instead
.button:hover, blue-btn:hover, green-btn:hover, red-btn:hover {
background-color: #3e8e41;
box-shadow: 0px 0px 0px 0px;
}
Still only works for button class
So I tried this one
.blue-btn:hover {
background-color: #3e8e41;
box-shadow: 0px 0px 0px 0px;
}
.green-btn:hover {
background-color: #3e8e41;
box-shadow: 0px 0px 0px 0px;
}
.red-btn:hover {
background-color: #3e8e41;
box-shadow: 0px 0px 0px 0px;
}
That worked – but it seem to me its a bit stupid to write the same bit again and again and again……
Anyone got a tip?

Answer 1

Use button:hover instead of .button:hover .

Answer 2

First off, you're confusing element names with classes. A button is an actual element (<button></button>) and .button is a class you've created.
I don't know if what you have is a button with the class of button because you didn't post any HTML but know that isn't good practice, it's redundant and confusing.
Give all the elements that you want to have a hover effect an encompassing class like .hover and the specific class of .blue or .red as applicable to the color you want.
.hover {
background: #3e8e41;
box-shadow: 0px 0px 0px 0px;
}
.blue {
background: #337AB7;
}
.green {
background: #008000;
}
.red {
background: #FF0000;
}