Rounded Rectangle - Color Change on Hover

This button is the rounded-corner version of the classic rectangular style. The choice between sharp or rounded corners is purely aesthetic - both have trended in and out of fashion. While sharp edges may be having a moment, the softer feel of rounded corners can better suit certain designs.

You don’t need a border to use border-radius; the rule still applies without one.

HTML:

Copy to clipboard
<a href='#'><div id='button-example-935'>Click here!</div></a>

CSS:

Copy to clipboard

#button-example-935 {

color: #fffff7; background-color: #652F2A; padding: 20px 40px; font-size: 18px; font-weight: 600; width: 200px; text-align: center; border-radius: 15px;

}

#button-example-935:hover {

background-color: #D1B589;

}

Get gluten-free recipes in your inbox.

Subscribe for new recipes, baking tips, and the occasional note from Pumpkins n' Pies.

 © 2026 Abhishek & Miriam Chaturvedi