Looking for something specific?
This is the rounded-corner variation of the classic outlined button - same styling logic, softer silhouette. By adding a border-radius, you get a more approachable look. The hover effect remains the same: background and text colors swap for contrast and interactivity.
In this example, the border radius is set to 15 pixels. Lower values (like 5px) create a subtler curve, while higher values push the button toward a pill-shaped appearance.
Copy to clipboard<a href='#'><div id='button-example-940'>Click here!</div></a>
Copy to clipboard#button-example-940 {
color: #652F2A; border: 3px solid #652F2A; background-color: #fff; padding: 20px 40px; font-size: 18px; font-weight: 600; width: 200px; text-align: center; border-radius: 15px;
}#button-example-940:hover {
border: 3px solid #652F2A; background-color: #652F2A; color: #fff;
}
