Button Styles (HTML + CSS)

These are the button styles that our team uses at work, I save them here for an easy copy and paste workflow:

This is a thin gold button

Code:

<style>
  .uccsGoldButtonThin {
		padding-bottom: 5px;
		margin-top: 20px;
		padding-left: 0;
		padding-right: 0;
		border: solid transparent;
	}
	a.uccsGoldButtonThin {
		background-color: #cfb87c;
		border: solid 1px #cfb87c;
		color: #000;
		font-size: 21px;
		display: block;
		padding: 6px;
		text-align: center;
		border-radius: 4px;
	}
	a.uccsGoldButtonThin:hover {
		background-color: #dbca9e;
		color: #000;
		text-decoration: none;
	}
</style>
<a class="uccsGoldButtonThin" href="#">This is a thin gold button</a>

This is a thin dark button

Code:

<style>
.uccsDarkButtonThin {
		padding-bottom: 5px;
		margin-top: 20px;
		padding-left: 0;
		padding-right: 0;
		border: solid transparent;
	}
	a.uccsDarkButtonThin {
		background-color: #262626;
		border: solid 1px #262626;
		color: #fff;
		font-size: 21px;
		display: block;
		padding: 6px;
		text-align: center;
		border-radius: 4px;
	}
	a.uccsDarkButtonThin:hover {
		background-color: #333;
		color: #fff;
		text-decoration: none;
	}
</style>
<a class="uccsDarkButtonThin" href="#">This is a thin dark button</a>

This is a thin light button

Code:

<style>
.uccsLightButtonThin {
		padding-bottom: 5px;
		margin-top: 20px;
		padding-left: 0;
		padding-right: 0;
		border: solid transparent;
	}
	a.uccsLightButtonThin {
		background-color: #b5b5b5;
		border: solid 1px #919191;
		color: #000;
		font-size: 21px;
		display: block;
		padding: 6px;
		text-align: center;
		border-radius: 4px;
	}
	a.uccsLightButtonThin:hover {
		background-color: #919191;
		color: #000;
		text-decoration: none;
	}
</style>
<a class="uccsLightButtonThin" href="#">This is a thin light button</a>

This is a thin blue button

Code:

<style>
.uccsBlueButtonThin {
		padding-bottom: 5px;
		margin-top: 20px;
		padding-left: 0;
		padding-right: 0;
		border: solid transparent;
	}
	a.uccsBlueButtonThin {
		background-color: #007bc8;
		border: 1px solid #007bc8;
		color: white;
		font-size: 21px;
		display: block;
		padding: 6px;
		text-align: center;
		border-radius: 4px;
	}
	a.uccsBlueButtonThin:hover {
		color: white;
		background-color: hsl(203, 100%, 33%);
		text-decoration: none;
	}
</style>
<a class="uccsBlueButtonThin" href="#">This is a thin blue button</a>

Gold CTA Button

Code:

<style>
  .CTAGoldButton {
		min-width: 10em;
		width: 85%;
		height: 2em;
		font-size: 1.5em;
		padding: 0.25em 1em;
		white-space: nowrap;
		border-radius: 4px;
		display: block;
		margin: 20px auto 0 auto;
		background: #cfb87b;
		border: solid 1px #cfb87c;
		line-height: 1.5em;
		text-align: center;
		color: black;
	}
	.CTAGoldButton:hover {
		color: black;
		text-decoration: none;
		background: #dbca9e;
	}
</style>
<a class="CTAGoldButton" href="#">Gold CTA Button</a>

Dark CTA Button

Code:

<style>
  .CTADarkButton {
		min-width: 10em;
		width: 85%;
		height: 2em;
		font-size: 1.5em;
		padding: 0.25em 1em;
		white-space: nowrap;
		border-radius: 4px;
		display: block;
		margin: 20px auto 0 auto;
		background-color: #262626;
		border: solid 1px #262626;
		line-height: 1.5em;
		text-align: center;
		color: #fff;
	}
	.CTADarkButton:hover {
		color: #fff;
		text-decoration: none;
		background-color: #333;
	}
</style>
<a class="CTADarkButton" href="#">Dark CTA Button</a>

Light CTA Button

Code:

<style>
  .CTALightButton {
		min-width: 10em;
		width: 85%;
		height: 2em;
		font-size: 1.5em;
		padding: 0.25em 1em;
		white-space: nowrap;
		border-radius: 4px;
		display: block;
		margin: 20px auto 0 auto;
		background-color: #b5b5b5;
		border: solid 1px #919191;
		line-height: 1.5em;
		text-align: center;
		color: black;
	}
	.CTALightButton:hover {
		color: black;
		text-decoration: none;
		background: #919191;
	}
</style>
<a class="CTALightButton" href="#">Light CTA Button</a>

Blue CTA Button

Code:

<style>
  .CTABlueButton {
		min-width: 10em;
		width: 85%;
		height: 2em;
		font-size: 1.5em;
		padding: 0.25em 1em;
		white-space: nowrap;
		border-radius: 4px;
		display: block;
		margin: 20px auto 0 auto;
		background: #007bc8;
		border: 1px solid #007bc8;
		line-height: 1.5em;
		text-align: center;
		color: #fff;
	}
	.CTABlueButton:hover {
		color: #fff;
		text-decoration: none;
		background-color: #0068a8;
	}
</style>
<a class="CTABlueButton" href="#">Blue CTA Button</a>

Code:

<style>
  	.CTAWhiteButton {
		padding: 1em;
		background: white;
		border-radius: 4px;
		color: black;
		text-decoration: none;
		text-align: center;
		text-transform: uppercase;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
		text-shadow: none;
	}
	.CTAWhiteButton:hover {
		font-weight: bolder;
		color: black;
		text-decoration: none;
	}
	.CTAWhiteButtonContainer {
		display: block;
		text-align: center;
		margin: 2em;
	}
</style>
<div class="CTAWhiteButtonContainer">
	<a class="CTAWhiteButton" href="#">White CTA Button</a>
</div>