Looking for something specific?
This solid-color button darkens on hover. No secondary background color required. The beauty of the approach is its flexibility—you don’t need to worry about choosing a specific hover color, and it works with nearly any base color that isn’t already very dark.
Background images are always applied over the background color. This style takes advantage of that property by putting a linear gradient in as the background image, and then setting that gradient to be a single transparent color - in this case, black with only 20% opacity. Increase that 0.2 to make it darker, and decrease in order to make it a lighter effect.
Copy to clipboard<a href='#'><div id='button-example-942'>Click here!</div></a>
Copy to clipboard#button-example-942 {
color: #fffff7; background-color: #D0A7A2; padding: 20px 40px; font-size: 18px; font-weight: 600; width: 200px; text-align: center;
}#button-example-942:hover {
background-image: linear-gradient(rgba(0, 0, 0, 0.2));
}
