I have developed some JavaScript code that adjusts the box-shadow of buttons to be a darker version of their background color. This allows users to dynamically change the button background colors.
The current code successfully changes the box shadow based on the background color, but I'm having difficulty making it so that the box shadow values only change on hover. Right now, the entire property is being affected instead of just the color of the shadow.
$("input[type=submit]").each(function() {
//get button color
var btnclr = $(this).css("background-color");
//make darker
$(this).css({
"box-shadow": "0 -3px 7px " + LightenDarkenColor(rgb2hex(btnclr), -80) + " inset"
});
});
input[type=submit] {
cursor: pointer;
border-radius: 5px;
border: 1px solid #555753;
background-color: cor11;
font-weight: normal;
text-transform: uppercase;
box-shadow: 0 -3px 7px #888a85 inset;
}
input[type=submit]:hover {
box-shadow: 0px 3px 7px #888a85 inset;
text-shadow: 0 0;
}
While I could create a hover animation in JavaScript, I would prefer to stick with CSS as it is more lightweight. Any suggestions on how I can modify the box-shadow property by only changing the color part?