Software Developer

Sample CSS Colors For Buttons, Links and Hover Colors

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;
}

By

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]