CSS Box Shadow - Hover Class - html

Question

I'm trying to build a generic hover class that uses box-shadow amd that will work with multiple colors of buttons. For this reason, I want the "shadow" to be different for every color of button. I'm trying to figure out if there is a way to use or set only the color attribute of a shadow element?
Here is what I mean:
/*Notice that .button shadows does not have a color value*/
.button {
-webkit-box-shadow:
0px 8px 16px 0px;
box-shadow:
0px 8px 16px 0px;
}
.button:hover{
-webkit-box-shadow:
0px 16px 16px 0px;
box-shadow:
0px 16px 16px 0px;
}
/*And color elements does not have other values for the shadow*/
.red{
-webkit-box-shadow:
rgba(255, 0, 0, 0.1);
box-shadow:
rgba(255, 0, 0, 0.1);
}
.green{
-webkit-box-shadow:
rgba(0, 255, 0, 0.1);
box-shadow:
rgba(0, 255, 0, 0.1);
}
...to be used as follows:
<div class="button red>Red Button</div>
<div class="button green>Green Button</div>
I hope that explains the situation. Brainstorm time!

Answer 1

You need to add color: red
.red{
color:red
}
.green{
color:green
}
Since color: property applies to the text also, you need to wrap the text with span tag and give color:black to span.
DEMO

Answer 2

Unfortunately there is no way to specify ONLY the color for a box shadow as specified here: http://dev.w3.org/csswg/css3-background/#the-box-shadow
You will need to give a separate box shadow rule for each color class.

Answer 3

In CSS3 there in no box-shadow-color rule, so for different buttons you need to specify all shadow parameters (size, position, color).

Answer 4

try this css styles in this style using color for individual menu, u can try shadow to set instead of color...
HTMl Code
<div class="menu">
<ul>
<li class="active1">Home</li>
<li>About Us</li>
<li>Portfolio</li>
<li>Product</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS Style
.menu{
font-family:Arial, Helvetica, sans-serif;
color:white;
float:left;
position:absolute;
top:95px;
width:855px;
background-image:url(../images/bottom-menu-line.png);
background-position:center bottom;
background-repeat:no-repeat;
}
.menu ul{padding:0; margin-left:65px; border-radius:10px;}
.menu ul li {
float:left;
border-radius:10px;
width:110px;
height:47px;
list-style:none;
padding:0;
margin-left:5px;
margin-right:5px;
/*overflow:hidden*/
}
.menu ul li a {
font-size:12px;
color:#fffcc7;
background-image:url(../images/button.png);
background-position:center;
height:47px;
overflow:hidden;
line-height:47px;
text-decoration:none;
width:110px;
text-align:center;
float:left;
border-radius:10px;
}
.menu li {float:left; padding:0;}
.menu ul li a:hover {
margin: -3px;
}
.menu ul li:nth-of-type(6) a:hover {
border:3px solid #c10202 !important;
border-radius:10px !important;
}
.menu ul li:nth-of-type(5) a:hover {
border:#c1d65f solid 3px;
border-radius:10px;
}
.menu ul li:nth-of-type(4) a:hover {
border:#01d290 solid 3px;
border-radius:10px;
}
.menu ul li:nth-of-type(3) a:hover {
border:#904ca1 solid 3px;
border-radius:10px;
}
.menu ul li:nth-of-type(2) a:hover {
border:#00caf3 solid 3px;
border-radius:10px;
}
.menu ul li:nth-of-type(1) a:hover {
border:3px #d44c1f solid;
border-radius:10px;
}
.active1{
border:3px #d44c1f solid;
width:110px !important;
border-radius:10px;
height:47px !important;
margin-bottom:7px !important;
margin-right:5px !important;
}
.active2{
border:#00caf3 solid 3px;
width:110px !important;
border-radius:10px;
height:47px !important;
margin-bottom:7px !important;
margin-right:5px !important;
}
.active3{
border:#904ca1 solid 3px;
width:110px !important;
border-radius:10px;
height:47px !important;
margin-bottom:7px !important;
margin-right:5px !important;
}
.active4{
border:#01d290 solid 3px;
width:110px !important;
border-radius:10px;
height:47px !important;
margin-bottom:7px !important;
margin-right:5px !important;
}
.active5{
border:#c1d65f solid 3px;
width:110px !important;
border-radius:10px;
height:47px !important;
margin-bottom:7px !important;
margin-right:5px !important;
}
.active6{
border:3px solid #c10202;
width:110px !important;
border-radius:10px;
height:47px !important;
margin-bottom:7px !important;
margin-right:5px !important;
}

Answer 5

No you can't, you have to put the 2 cases normal and hover for each button
http://dev.w3.org/csswg/css3-background/#the-box-shadow