Here are sample CSS colors for accent colors which you can apply to buttons and/or links. All of the CSS colors below include the matching hover colors for each color.
Before choosing your colors, first add this general style, if you want your buttons to look like those in the picture, above. Add this button style to your CSS:
.button, input[type="submit"] {
border:0;
padding:8px 12px;
font-size:20px;
color:#fff;
}
Then, add the CSS, from below, for any of the colors that you like. For each color, you can hover over the sample button to see its matching hover color.
The CSS colors, below, also include the sample CSS code to apply this color to your text links, as seen in the picture at the top of this page.
Blue
To make all of your buttons blue, use this CSS:
.button, input[type="submit"] {
background:#2E76CF;
}
.button:hover, input[type="submit"]:hover {
background:#173b67;
}
If you prefer to only make some buttons blue, for example, only if they have the .blue class selector added to them, then use this CSS instead:
.button.blue, input[type="submit"].blue {
background:#2E76CF;
}
.button.blue:hover, input[type="submit"].blue:hover {
background:#173b67;
}
To make your text links blue, add this CSS:
a {
color:#2E76CF;
}
a:hover {
color:#173b67;
}
Aqua
To make all of your buttons aqua, use this CSS:
.button, input[type="submit"] {
background:#2699ab;
}
.button:hover, input[type="submit"]:hover {
background:#228999;
}
If you prefer to only make some buttons and inputs aqua, for example, only if they have the .aqua class selector added to them, then use this CSS instead:
.button.aqua, input[type="submit"].aqua {
background:#2699ab;
}
.button.aqua:hover, input[type="submit"].aqua:hover {
background:#228999;
}
To make your text links aqua, add this CSS:
a {
color:#2699ab;
}
a:hover {
color:#228999;
}
Coral
To make all of your buttons coral, use this CSS:
.button, input[type="submit"] {
background:#cf2e2e;
}
.button:hover, input[type="submit"]:hover {
background:#902020;
}
If you prefer to only make some buttons coral, for example, only if they have the .coral class selector added to them, then use this CSS instead:
.button.coral, input[type="submit"].coral {
background:#cf2e2e;
}
.button.coral:hover, input[type="submit"].coral:hover {
background:#902020;
}
To make your text links coral, add this CSS:
a {
color:#cf2e2e;
}
a:hover {
color:#902020;
}
Orange
To make all of your buttons orange, use this CSS:
.button, input[type="submit"] {
background:#fb4400;
}
.button:hover, input[type="submit"]:hover {
background:#8e1c00;
}
If you prefer to only make some buttons orange, for example, only if they have the .orange class selector added to them, then use this CSS instead:
.button.orange, input[type="submit"].orange {
background:#fb4400;
}
.button.orange:hover, input[type="submit"].orange:hover {
background:#8e1c00;
}
To make your text links orange, add this CSS:
a {
color:#fb4400;
}
a:hover {
color:#8e1c00;
}
Green
To make all of your buttons green, use this CSS:
.button, input[type="submit"] {
background:#64991e;
}
.button:hover, input[type="submit"]:hover {
background:#507a18;
}
If you prefer to only make some buttons green, for example, only if they have the .green class selector added to them, then use this CSS instead:
.button.green, input[type="submit"].green {
background:#64991e;
}
.button.green:hover, input[type="submit"].green:hover {
background:#507a18;
}
To make your text links green, add this CSS:
a {
color:#64991e;
}
a:hover {
color:#507a18;
}
Muted Green
To make all of your buttons muted green, use this CSS:
.button, input[type="submit"] {
background:#6b9658;
}
.button:hover, input[type="submit"]:hover {
background:#557846;
}
If you prefer to only make some buttons muted green, for example, only if they have the .muted-green class selector added to them, then use this CSS instead:
.button.muted-green, input[type="submit"].muted-green {
background:#6b9658;
}
.button.muted-green:hover, input[type="submit"].muted-green:hover {
background:#557846;
}
To make your text links muted green, add this CSS:
a {
color:#6b9658;
}
a:hover {
color:#557846;
}
Pink
To make all of your buttons pink, use this CSS:
.button, input[type="submit"] {
background:#f171ab;
}
.button:hover, input[type="submit"]:hover {
background:#c05a88;
}
If you prefer to only make some buttons pink, for example, only if they have the .pink class selector added to them, then use this CSS instead:
.button.pink, input[type="submit"].pink {
background:#f171ab;
}
.button.pink:hover, input[type="submit"].pink:hover {
background:#c05a88;
}
To make your text links pink, add this CSS:
a {
color:#f171ab;
}
a:hover {
color:#c05a88;
}
Orchid
To make all of your buttons orchid, use this CSS:
.button, input[type="submit"] {
background:#d623cb;
}
.button:hover, input[type="submit"]:hover {
background:#c01fb6;
}
If you prefer to only make some buttons orchid, for example, only if they have the .orchid class selector added to them, then use this CSS instead:
.button.orchid, input[type="submit"].orchid {
background:#d623cb;
}
.button.orchid:hover, input[type="submit"].orchid:hover {
background:#c01fb6;
}
To make your text links orchid, add this CSS:
a {
color:#d623cb;
}
a:hover {
color:#c01fb6;
}
Neon Purple
To make all of your buttons neon purple, use this CSS:
.button, input[type="submit"] {
background:#993CF3;
}
.button:hover, input[type="submit"]:hover {
background:#7a30c2;
}
If you prefer to only make some buttons neon purple, for example, only if they have the .neon-purple class selector added to them, then use this CSS instead:
.button.neon-purple, input[type="submit"].neon-purple {
background:#993CF3;
}
.button.neon-purple:hover, input[type="submit"].neon-purple:hover {
background:#7a30c2;
}
To make your text links neon purple, add this CSS:
a {
color:#993CF3;
}
a:hover {
color:#7a30c2;
}
Neon Red
To make all of your buttons neon red, use this CSS:
.button, input[type="submit"] {
background:#FE0001;
}
.button:hover, input[type="submit"]:hover {
background:#cb0000;
}
If you prefer to only make some buttons neon red, for example, only if they have the .neon-red class selector added to them, then use this CSS instead:
.button.neon-red, input[type="submit"].neon-red {
background:#FE0001;
}
.button.neon-red:hover, input[type="submit"].neon-red:hover {
background:#cb0000;
}
To make your text links neon red, add this CSS:
a {
color:#FE0001;
}
a:hover {
color:#cb0000;
}
Neon Yellow
To make all of your buttons neon yellow, use this CSS:
.button, input[type="submit"] {
background:#FFFF00;
color: #141414;
}
.button:hover, input[type="submit"]:hover {
background:#e5e500;
}
If you prefer to only make some buttons neon yellow, for example, only if they have the .neon-yellow class selector added to them, then use this CSS instead:
.button.neon-yellow, input[type="submit"].neon-yellow {
background:#FFFF00;
color: #141414;
}
.button.neon-yellow:hover, input[type="submit"].neon-yellow:hover {
background:#e5e500;
}
To make your text links yellow, add this CSS:
a {
color:#FFFF00;
}
a:hover {
color:#e5e500;
}
Gold
To make all of your buttons gold, use this CSS:
.button, input[type="submit"] {
background:#FDD017;
}
.button:hover, input[type="submit"]:hover {
background:#caa612;
}
If you prefer to only make some buttons gold, for example, only if they have the .gold class selector added to them, then use this CSS instead:
.button.gold, input[type="submit"].gold {
background:#FDD017;
}
.button.gold:hover, input[type="submit"].gold:hover {
background:#caa612;
}
To make your text links gold, add this CSS:
a {
color:#FDD017;
}
a:hover {
color:#caa612;
}
Flat Black
To make all of your buttons flat black, use this CSS:
.button, input[type="submit"] {
background:#141414;
}
.button:hover, input[type="submit"]:hover {
background:#2b2b2b;
}
If you prefer to only make some buttons flat black, for example, only if they have the .flat-black class selector added to them, then use this CSS instead:
.button.flat-black, input[type="submit"].flat-black {
background:#141414;
}
.button.flat-black:hover, input[type="submit"].flat-black:hover {
background:#2b2b2b;
}
To make your text links flat black, add this CSS:
a {
color:#141414;
}
a:hover {
color:#2b2b2b;
}
Gray
To make all of your buttons gray, use this CSS:
.button, input[type="submit"] {
background:#999;
}
.button:hover, input[type="submit"]:hover {
background:#6b6b6b;
}
If you prefer to only make some buttons gray, for example, only if they have the .gray class selector added to them, then use this CSS instead:
.button.gray, input[type="submit"].gray {
background:#999;
}
.button.gray:hover, input[type="submit"].gray:hover {
background:#6b6b6b;
}
To make your text links gray, add this CSS:
a {
color:#999;
}
a:hover {
color:#6b6b6b;
}
Questions and Comments are Welcome