Looking for something specific?
This variation lightens the button on hover - a simple alternative to the darkening method. While you could achieve the effect with a gradient overlay, there's an even easier option if the button sits on a light background: reduce the button’s overall opacity on hover.
In this example, the button drops to 80% opacity. Raise the value for a subtler effect, or lower it for a more noticeable shift. If you did need to to lighten a button on a dark background, then you could also use the following on hover instead of the opacity shift:
background-image: linear-gradient(rgba(255, 255, 255, 0.2));
Copy to clipboard<a href='#'><div id='button-example-943'>Click here!</div></a>
Copy to clipboard#button-example-943 {
color: #fffff7; border: 1px solid #652F2A; background-color: #652F2A; padding: 20px 40px; font-size: 18px; font-weight: 600; width: 200px; text-align: center; border-radius: 15px;
}#button-example-943:hover {
opacity: 0.8;
}
