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.
Copy to clipboard<a href='#'><div id='button-example-927'>Click here!</div></a>
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;
}
The button gets darker when you hover over it. No secondary hover color needs to be specified, it will just work.
Copy to clipboard<a href='#'><div id='button-example-942'>Click here!</div></a>
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);
}
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: #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;
}
Copy to clipboard<a href='#'><div id='button-example-935'>Click here!</div></a>
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;
}
A button with rounded corners, which gets a little lighter on hover, regardless of the starting color.
Copy to clipboard<a href='#'><div id='button-example-943'>Click here!</div></a>
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;
}
A white button with rounded corners and colored border, which changes to a colored background with white text on hover.
Copy to clipboard<a href='#'><div id='button-example-940'>Click here!</div></a>
Copy to clipboard#button-example-940 {
color: #652F2A; border: 3px solid #652F2A; background-color: #fff; 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: #fff;
}
