Rounded Rectangle - Outline to Color on Hover

A white button with rounded corners and colored border, which changes to a colored background with white text on hover.

HTML:

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

CSS:

Copy to clipboard

#button-example-940 {

color: #652F2A; border: 3px solid #652F2A; background-color: #fffff7; 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: #fffff7;

}

Pumpkins n' Pies

A recipe blog devoted to gluten free baking, and making food from scratch. Here you will find sourdough recipes, beautiful flowers, organic fruits, and most importantly - lots of pie!
 © 2024 Abhishek & Miriam Chaturvedi