Looking for something specific?
Outlined buttons are a clean, flexible choice - especially useful on saturated or textured backgrounds. Instead of using a solid fill, these buttons rely on a visible border and contrasting text color to stand out without overwhelming the design.
A common approach is to start with a white background and apply a contrasting colored border and matching text. On hover, the background and text colors swap, creating a high-contrast, interactive effect. This technique keeps the button lightweight while still clearly signaling interactivity.
Copy to clipboard<a href='#'><div id='button-example-939'>Click here!</div></a>
Copy to clipboard#button-example-939 {
color: #364D30; border: 3px solid #364D30; background-color: #fff; padding: 20px 40px; font-size: 18px; font-weight: 600; width: 200px; text-align: center;
}#button-example-939:hover {
border: 3px solid #364D30; background-color: #364D30; color: #fff;
}
