chrisvanpatten/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Awesome CSS3 buttons with Compass and Sass

This is a mixin I built for quick CSS3 buttons on the new VanPattenMedia.com. It's designed to be very flexible, and has a lot of options so you can customize it quickly and easily.
Documentation

Defaults are in bold, if they exist.
@include vpm-button($background-color, $text-color, $state, $spread, $radius);

background-color (any color) - The base background color of the button. The exact values of the colors used in the gradient (and the colors of the hover and active states) are automatically calculated using Sass' built-in darken and lighten functions.
text-color (any color) - The color of the button text. The CSS3 text-shadow is calculated from this value using Sass' invert function.
state (default, active, hover) - The state of the button.
spread (14%, any percentage) - The percentage between the start and end values in the CSS3 gradients.
radius (8px, any px value) - The radius of the button border.

Browser Support

The vpm-button mixin is fully compatible with recent versions of Webkit, Gecko, Presto, and IE9+. It will degrade gracefully in IE6-8 (no border-radius support) and in older versions of the other rendering engines.

  
## _vpm-button.scss
@mixin vpm-button($background-color, $text-color, $state: default, $spread: 14%, $radius: 8px) {
	// Enable SVG support for IE9
	$experimental-support-for-svg: true;

	@if $state == default {
		border: 1px solid darken($background-color, 25%);
		@include border-radius($radius);
		text: {
			decoration: none;
			align: center;
		}
		@include text-shadow(0 1px 1px invert($text-color));
	}

	// Gradients and backgrounds
	@if $state == default {
		background-color: darken($background-color, $spread / 2); // Old browsers
		@include filter-gradient(
			darken($background-color, 0%),
			darken($background-color, $spread),
			vertical
		); // IE6-9
		@include background-image(
			linear-gradient(
				top,
				darken($background-color, 0%) 0%,
				darken($background-color, $spread) 100%
			)
		);
	} @else if $state == hover {
		background-color: lighten($background-color, 0%); // Old browsers
		@include filter-gradient(
			lighten($background-color, $spread / 2),
			darken($background-color, $spread / 2),
			vertical
		); // IE6-9
		@include background-image(
			linear-gradient(
				top,
				lighten($background-color, $spread / 2) 0%,
				darken($background-color, $spread / 2) 100%
			)
		);
	} @else if $state == active {
		background-color: darken($background-color, $spread / 2); // Old browsers
		@include filter-gradient(
			darken($background-color, $spread),
			darken($background-color, 0%),
			vertical
		); // IE6-8
		@include background-image(
			linear-gradient(
				top,
				darken($background-color, $spread) 0%,
				darken($background-color, 0%) 100%
			)
		);
	}

	// Box Shadow
	@if $state == default {
		@include box-shadow(
			inset 0 1px 0 0 lighten($background-color, 25%),
			inset 0 -1px 0 0 darken($background-color, 20%)
		);
	} @else if $state == active {
		@include box-shadow(
			inset 0 -1px 0 0 lighten($background-color, 25%),
			inset 0 1px 0 0 darken($background-color, 20%)
		);
	}

	// Text style
	color: $text-color;

	// Don't use the filter in IE9
	filter: none;
}

## index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Awesome CSS3 buttons with Compass and Sass</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p>This is an awesome button. <a href="http://www.vanpattenmedia.com/" rel="nofollow" class="my-button">Go now!</a></p>
</body>
</html>

## style.scss
/*
 * Awesome CSS3 buttons with Compass and Sass
 * Assembled by Chris Van Patten
 *
 * My code is public domain. Do with it what you want.
 * Sass and Compass are available under their respective licenses.
 * Find them at sass-lang.com and compass-style.org.
 */

@import "compass/css3";
@import "_vpm-button";

.my-button {
	display: block;
	padding: 14px 4px;
	font: 600 24px 'Helvetica', 'Arial', sans-serif;

	$text-color: #FFF;
	$background-color: #8596fa;
	@include vpm-button($background-color, $text-color, default);

	&:hover {
		@include vpm-button($background-color, $text-color, hover);
	}

	&:active {
		@include vpm-button($background-color, $text-color, active);
	}
}
	@mixin vpm-button($background-color, $text-color, $state: default, $spread: 14%, $radius: 8px) {
	// Enable SVG support for IE9
	$experimental-support-for-svg: true;

	@if $state == default {
	border: 1px solid darken($background-color, 25%);
	@include border-radius($radius);
	text: {
	decoration: none;
	align: center;
	}
	@include text-shadow(0 1px 1px invert($text-color));
	}

	// Gradients and backgrounds
	@if $state == default {
	background-color: darken($background-color, $spread / 2); // Old browsers
	@include filter-gradient(
	darken($background-color, 0%),
	darken($background-color, $spread),
	vertical
	); // IE6-9
	@include background-image(
	linear-gradient(
	top,
	darken($background-color, 0%) 0%,
	darken($background-color, $spread) 100%
	)
	);
	} @else if $state == hover {
	background-color: lighten($background-color, 0%); // Old browsers
	@include filter-gradient(
	lighten($background-color, $spread / 2),
	darken($background-color, $spread / 2),
	vertical
	); // IE6-9
	@include background-image(
	linear-gradient(
	top,
	lighten($background-color, $spread / 2) 0%,
	darken($background-color, $spread / 2) 100%
	)
	);
	} @else if $state == active {
	background-color: darken($background-color, $spread / 2); // Old browsers
	@include filter-gradient(
	darken($background-color, $spread),
	darken($background-color, 0%),
	vertical
	); // IE6-8
	@include background-image(
	linear-gradient(
	top,
	darken($background-color, $spread) 0%,
	darken($background-color, 0%) 100%
	)
	);
	}

	// Box Shadow
	@if $state == default {
	@include box-shadow(
	inset 0 1px 0 0 lighten($background-color, 25%),
	inset 0 -1px 0 0 darken($background-color, 20%)
	);
	} @else if $state == active {
	@include box-shadow(
	inset 0 -1px 0 0 lighten($background-color, 25%),
	inset 0 1px 0 0 darken($background-color, 20%)
	);
	}

	// Text style
	color: $text-color;

	// Don't use the filter in IE9
	filter: none;
	}
	<!DOCTYPE HTML>
	<html lang="en-US">
	<head>
	<meta charset="UTF-8">
	<title>Awesome CSS3 buttons with Compass and Sass</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<p>This is an awesome button. <a href="http://www.vanpattenmedia.com/" rel="nofollow" class="my-button">Go now!</a></p>
	</body>
	</html>
	/*
	* Awesome CSS3 buttons with Compass and Sass
	* Assembled by Chris Van Patten
	*
	* My code is public domain. Do with it what you want.
	* Sass and Compass are available under their respective licenses.
	* Find them at sass-lang.com and compass-style.org.
	*/

	@import "compass/css3";
	@import "_vpm-button";

	.my-button {
	display: block;
	padding: 14px 4px;
	font: 600 24px 'Helvetica', 'Arial', sans-serif;

	$text-color: #FFF;
	$background-color: #8596fa;
	@include vpm-button($background-color, $text-color, default);

	&:hover {
	@include vpm-button($background-color, $text-color, hover);
	}

	&:active {
	@include vpm-button($background-color, $text-color, active);
	}
	}