CSS3 Buttons

buttons.css

input.button, button.button {
  height: 34px;
  cursor: pointer;
  -webkit-appearance: none;
}

.button {
  background-color: #EEE;
  display: inline-block;
  vertical-align: middle;
  height: 32px;
  line-height: 32px;
  padding: 0px 25.6px;
  font-weight: 300;
  font-size: 14px;
  font-family: "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
  color: #666;
  margin: 0;
  text-decoration: none;
  text-align: center;
}
.button:hover {
  background-color: #EEE;
}
.button:active {
  transition-duration: 0s;
  background: #eeeeee;
  color: #bbbbbb;
}
.button:focus {
  outline: none;
}
.button.border, .button.flat {
  transition-duration: .3s;
  border: none;
}
.button.flat {
  transition-property: background;
  background: #EEE;
}
.button.flat:hover {
  background: #fbfbfb;
}
.button.flat:active {
  background: #eeeeee;
  color: #bbbbbb;
}
.button.border {
  transition-property: all;
  color: #666;
  background: #FFF;
  border: 2px solid #666;
}
.button.border:hover {
  background: none;
  color: gray;
  border: 2px solid gray;
}
.button.border:active {
  transition-duration: 0s;
  background: none;
  color: #4d4d4d;
  border: 2px solid #4d4d4d;
}
.button.disabled, .button.disabled:hover, .button.disabled:active, .button:disabled {
  opacity: .8;
  background: #EEE !important;
  color: #CCC !important;
  cursor: default;
  -webkit-appearance: none;
}
.button.disabled.border, .button.disabled:hover.border, .button.disabled:active.border, .button:disabled.border {
  border-color: #666 !important;
}

.button.border.primary {
  color: #00A1CB;
  border-color: #00A1CB;
}
.button.border.primary:hover {
  color: #00c9fe;
  border-color: #00c9fe;
}
.button.border.primary:active {
  color: #007998;
  border-color: #007998;
}

.button.flat.primary {
  background: #00A1CB;
  color: #FFF;
}
.button.flat.primary:hover {
  background: #00b5e5;
}
.button.flat.primary:active {
  background: #1495b7;
  color: #00647f;
}

.button.border.action {
  color: #7db500;
  border-color: #7db500;
}
.button.border.action:hover {
  color: #a0e800;
  border-color: #a0e800;
}
.button.border.action:active {
  color: #5a8200;
  border-color: #5a8200;
}

.button.flat.action {
  background: #7db500;
  color: #FFF;
}
.button.flat.action:hover {
  background: #8fcf00;
}
.button.flat.action:active {
  background: #76a312;
  color: #486900;
}

.button.border.highlight {
  color: #F18D05;
  border-color: #F18D05;
}
.button.border.highlight:hover {
  color: #fba42e;
  border-color: #fba42e;
}
.button.border.highlight:active {
  color: #bf7004;
  border-color: #bf7004;
}

.button.flat.highlight {
  background: #F18D05;
  color: #FFF;
}
.button.flat.highlight:hover {
  background: #fa9915;
}
.button.flat.highlight:active {
  background: #d8891e;
  color: #a66103;
}

.button.border.caution {
  color: #E54028;
  border-color: #E54028;
}
.button.border.caution:hover {
  color: #eb6855;
  border-color: #eb6855;
}
.button.border.caution:active {
  color: #c22d18;
  border-color: #c22d18;
}

.button.flat.caution {
  background: #E54028;
  color: #FFF;
}
.button.flat.caution:hover {
  background: #e8543f;
}
.button.flat.caution:active {
  background: #cd5240;
  color: #ac2815;
}

.button.jumbo {
  font-size: 24px;
  height: 51.2px;
  line-height: 51.2px;
  padding: 0px 40.96px;
}

.button.large {
  font-size: 19px;
  height: 38.4px;
  line-height: 38.4px;
  padding: 0px 30.72px;
}

input.button.large, button.button.large {
  height: 40.4px;
}

.button.small {
  font-size: 15px;
  height: 25.6px;
  line-height: 25.6px;
  padding: 0px 20.48px;
}

input.button.small, button.button.small {
  height: 27.6px;
}

.button.tiny {
  font-size: 12px;
  height: 22.4px;
  line-height: 22.4px;
  padding: 0px 17.92px;
}

input.button.tiny, button.button.tiny {
  height: 24.4px;
}

/*# sourceMappingURL=buttons.css.map */

buttons.scss

// Referenced from: http://alexwolfe.github.io/Buttons/

// $btn-namespace: ".button"; //prefix for all classes
$btn-bgcolor: #EEE;
$btn-height: 32px;

$btn-font-color: #666;
$btn-font-size: 14px;
$btn-font-weight: 300;
$btn-font-family: "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;

// (name background-color) add as many as you like.
$btn-actions: ('primary' #00A1CB) ('action' #7db500) ('highlight' #F18D05) ('caution' #E54028);
$btn-types: 'border';
$btn-sizes: 'jumbo' 'large' 'small' 'tiny';

// If user elects to use font-size: inherit in _options
// leave out calcs which result in inherit2 etc.
// $btn-smallfs: inherit;
// $btn-tinyfs: inherit;
// $btn-largefs: inherit;
// @if $btn-font-size != inherit {
	$btn-largefs: $btn-font-size + 5;
	$btn-tinyfs: $btn-font-size - 2;
	$btn-smallfs: $btn-font-size + 1;
// }

//HEIGHT NEEDED FOR FORM ELEMENTS
input.button, button.button {
	height: $btn-height + 2;
	cursor: pointer;
	-webkit-appearance: none;
}

.button {
	background-color: $btn-bgcolor;
	display: inline-block;
	vertical-align: middle;
	// border: 1px solid darken($btn-bgcolor, 10%);
	height: $btn-height;
	line-height: $btn-height;
	padding: 0px ($btn-height * .8);
	font-weight: $btn-font-weight;
	font-size: $btn-font-size;
	font-family: $btn-font-family;
	color:  $btn-font-color;
	margin: 0;
	text-decoration: none;
	text-align: center;

	&:hover {
		background-color: $btn-bgcolor;
	}
	&:active {
		transition-duration: 0s;
		background: desaturate($btn-bgcolor, 20%);
		color: darken($btn-bgcolor, 20%);

	}
	&:focus {
		outline: none;
	}

	&.border, &.flat {
		transition-duration: .3s;
		border: none;
	}

	&.flat {
		$btn-background: $btn-bgcolor;
		transition-property: background;
		background: $btn-background;

		&:hover {
			background: lighten($btn-background, 5%);
		}
		&:active {
			background: desaturate($btn-background, 20%);
			color: darken($btn-background, 20%);
		}
	}

	&.border {
		transition-property: all;
		color: $btn-font-color;
		background: #FFF;
		border: 2px solid $btn-font-color;

		&:hover {
			background: none;
			color: lighten($btn-font-color, 10%);
			border: 2px solid lighten($btn-font-color, 10%);
		}
		&:active {
			transition-duration: 0s;
			background: none;
			color: darken($btn-font-color, 10%);
			border: 2px solid darken($btn-font-color, 10%);
		}
	}

	&.disabled,
	&.disabled:hover,
	&.disabled:active,
	&:disabled {
		opacity: .8;
		background: #EEE !important;
		// border: 1px solid #DDD;
		color: #CCC !important;
		cursor: default;
		-webkit-appearance: none;

		&.border {
			border-color: #666 !important;
		}
	}

}

@each $btn-action in $btn-actions {
	//GET NAME & COLOR
	$btn-name: nth($btn-action, 1);
	$btn-background: nth($btn-action, 2);


	// .button.border-primary .button.border-action etc.
	.button.border.#{$btn-name} {
		color: $btn-background;
		border-color: $btn-background;

		&:hover {
			color: lighten($btn-background, 10%);
			border-color: lighten($btn-background, 10%);
		}
		&:active {
			color: darken($btn-background, 10%);
			border-color: darken($btn-background, 10%);
		}
	}


	// .button.flat-primary .button.flat-action etc.
	.button.flat.#{$btn-name} {
		background: $btn-background;
		color: #FFF;

		&:hover {
			background: lighten($btn-background, 5%);
		}
		&:active {
			background: desaturate($btn-background, 20%);
			color: darken($btn-background, 15%);
		}
	}

}


@each $btn-size in $btn-sizes {

	// .button-large .button-small .button-tiny
	.button.#{$btn-size} {
		@if $btn-size == 'jumbo' {
			font-size: $btn-largefs + 5;
			height: $btn-height * 1.6;
			line-height: $btn-height * 1.6;
			padding: 0px ($btn-height * 1.6) * .8;
		}

		@if $btn-size == 'large' {
			font-size: $btn-largefs;
			height: $btn-height * 1.2;
			line-height: $btn-height * 1.2;
			padding: 0px ($btn-height * 1.2) * .8;
		}

		@if $btn-size == 'small' {
			font-size: $btn-smallfs;
			height: $btn-height * .8;
			line-height: $btn-height * .8;
			padding: 0px ($btn-height * .8) * .8;
		}

		@if $btn-size == 'tiny' {
			font-size: $btn-tinyfs;
			height: $btn-height * .7;
			line-height: $btn-height * .7;
			padding: 0px ($btn-height * .7) * .8;
		}
	}

	//HEIGHT NEEDED FOR FORM ELEMENTS +2px on height
	input.button.#{$btn-size}, button.button.#{$btn-size} {
		@if $btn-size == 'large' {
			height: ($btn-height * 1.2) + 2;
		}

		@if $btn-size == 'small' {
			height: ($btn-height * .8) + 2;
		}

		@if $btn-size == 'tiny' {
			height: ($btn-height * .7) + 2;
		}
	}
}

demo.html

<!DOCTYPE html>
<html>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="buttons.css">
	<style>
		section {
			margin-bottom: 1em;
		}

		section h1 {
			border-bottom: 1px solid #1a1a1a;
		}
	</style>

	<h1>CSS3 Buttons</h1>
	Referenced from <a href="http://alexwolfe.github.io/Buttons/">http://alexwolfe.github.io/Buttons/</a>
	<section>
		<h1>.button.flat.jumbo</h1>
		<a href="#" class="button flat jumbo">press me</a>
		<a href="#" class="button flat primary jumbo">.primary</a>
		<a href="#" class="button flat action jumbo">.action</a>
		<a href="#" class="button flat highlight jumbo">.highlight</a>
		<a href="#" class="button flat caution jumbo">.caution</a>
	</section>

	<section>
		<h1>.button.flat</h1>
		<a href="#" class="button flat">press me</a>
		<a href="#" class="button flat primary">.primary</a>
		<a href="#" class="button flat action">.action</a>
		<a href="#" class="button flat highlight">.highlight</a>
		<a href="#" class="button flat caution">.caution</a>
	</section>

	<section>
		<h1>.button.flat.tiny </h1>
		<a href="#" class="button flat tiny ">press me</a>
		<a href="#" class="button flat primary tiny ">.primary</a>
		<a href="#" class="button flat action tiny ">.action</a>
		<a href="#" class="button flat highlight tiny ">.highlight</a>
		<a href="#" class="button flat caution tiny ">.caution</a>
	</section>

	<section>
		<h1>.button.flat.disabled</h1>
		<a href="#" class="button flat disabled">press me</a>
		<a href="#" class="button flat primary disabled">.primary</a>
		<a href="#" class="button flat action disabled">.action</a>
		<a href="#" class="button flat highlight disabled">.highlight</a>
		<a href="#" class="button flat caution disabled">.caution</a>
	</section>

	<section>
		<h1>.button.border.large</h1>
		<a href="#" class="button border large">press me</a>
		<a href="#" class="button border primary button rounded large">.primary</a>
		<a href="#" class="button border action button pill large">.action</a>
		<a href="#" class="button border highlight button circle large">.highlight</a>
		<a href="#" class="button border caution large">.caution</a>
	</section>

	<section>
		<h1>.button.border</h1>
		<a href="#" class="button border">press me</a>
		<a href="#" class="button border primary button rounded">.primary</a>
		<a href="#" class="button border action button pill">.action</a>
		<a href="#" class="button border highlight button circle">.highlight</a>
		<a href="#" class="button border caution">.caution</a>
	</section>

	<section>
		<h1>.button.border.small</h1>
		<a href="#" class="button border small">press me</a>
		<a href="#" class="button border primary button rounded small">.primary</a>
		<a href="#" class="button border action button pill small">.action</a>
		<a href="#" class="button border highlight button circle small">.highlight</a>
		<a href="#" class="button border caution small">.caution</a>
	</section>

	<section>
		<h1>.button.border.disabled</h1>
		<a href="#" class="button border disabled">press me</a>
		<a href="#" class="button border primary button rounded disabled">.primary</a>
		<a href="#" class="button border action button pill disabled">.action</a>
		<a href="#" class="button border highlight button circle disabled">.highlight</a>
	</section>
</html>