Pumpkins n' Pies

Basic Rectangle - Outline to Color on Hover

In its non-active state, this button is white with a colored outline. It fills in which color on hover.

Note that the border needs to be wider (3px vs the 1px in other examples) in order to look good.

HTML:

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

CSS:

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;

}

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 east-central Illinois, along with a byte of code for fellow developers.
 © 2024 Abhishek & Miriam Chaturvedi