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.


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


Copy to clipboard

#button-example-939 {

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