Pumpkins n' Pies

Basic Rectangle - Color Change on Hover

This classic style works well on any site. I've used green to gold here, but you can match the base and hover colors to your own branding.

Padding, font, and width rules help keep all the button examples uniform - but feel free to adjust them. Remove the width for varied sizes, or reduce padding for a slimmer look. I recommend keeping the text-align rule to avoid off-center text.

HTML:

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

CSS:

Copy to clipboard
#button-example-927 {
color: #fffff7; 
background-color: #364D30;
padding: 20px 40px;
font-size: 18px; 
font-weight: 600;
width: 200px;
text-align: center;

}
#button-example-927:hover {
background-color: #D1B589;

}

Pumpkins n' Pies

For gluten-free baking enthusiasts and garden lovers: discover delicious, from-scratch recipes featuring sourdough, whole foods, and most importantly – pie! Explore gardening tips from central Illinois, along with a byte of code for fellow developers.
 © 2025 Abhishek & Miriam Chaturvedi