Fun with Buttons

Part One

Some fun with CSS and buttons. A selection of buttons with a variety of styling.

Calls to action, and links with emphasis, buttons are a key part of a website's navigation. Below are some example styles for your inspiration, along with the CSS that makes them pretty.

All of these buttons are div elements wrapped in links. The div gives us the ability to add top and bottom padding, and make the link look more button-like.

Basic Rectangle - Color Change on Hover

The button changes color on hover.

HTML:

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

CSS:

Copy to clipboard

#button-example-927 {

color: #fffff7; border: 1px solid #364D30; background-color: #364D30; padding: 20px 40px; font-size: 18px; font-weight: 600; width: 200px; text-align: center;

}

#button-example-927:hover {

border: 1px solid #D1B589; background-color: #D1B589;

}

Basic Rectangle - Darken on Hover

The button gets darker when you hover over it. No secondary hover color needs to be specified, it will just work.

HTML:

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

CSS:

Copy to clipboard

#button-example-942 {

color: #fffff7; background-color: #D0A7A2; padding: 20px 40px; font-size: 18px; font-weight: 600; width: 200px; text-align: center;

}

#button-example-942:hover {

background-image: linear-gradient(rgb(0 0 0/20%) 0 0);

}

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: #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;

}

Rounded Rectangle - Color Change on Hover

A button with rounded corners, which changes color on hover.

HTML:

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

CSS:

Copy to clipboard

#button-example-935 {

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

}

#button-example-935:hover {

border: 1px solid #D1B589; background-color: #D1B589;

}

Rounded Rectangle - Lighten on Hover

A button with rounded corners, which gets a little lighter on hover, regardless of the starting color.

HTML:

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

CSS:

Copy to clipboard

#button-example-943 {

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

}

#button-example-943:hover {

opacity: 0.8;

}

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