SCSS Button Mixins

_buttons.scss

//Based on http://css3-buttons.heroku.com which only had SASS version of the mixin.

@mixin rounded($border) {
	-webkit-border-radius: $border;
	-moz-border-radius: $border;
	border-radius: $border;
}


@mixin shadow {
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

@mixin gradient($top, $bottom) {
	background-color: $bottom;
	background: -webkit-gradient(linear, left top, left bottom, from($top), to($bottom));
	background: -moz-linear-gradient(top, $top,  $bottom);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$top}', endColorstr='#{$bottom}');
}

@mixin button {
	display: inline-block;
	padding: .5em 2em .55em;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	@include rounded('.5em');
	//this determines Mozilla to show the padding
	border: solid 1px #ccc;
	@include shadow;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	&:hover {
		text-decoration: none;
	}
	&:active {
		position: relative;
		top: 1px;
	}
}

@mixin color($background) {
	border: solid 1px darken($background, 3%);
	@include gradient(lighten($background, 13%), $background);
  	color: mix(#fff, $background, 90%);
	&:hover {
		@include gradient(lighten($background, 10%), darken($background, 5%))
	}
	&:active {
		@include gradient($background, lighten($background, 10%));
		color: mix(#fff, $background, 70%);
	}
}


// Mozilla: don't show border around the button's text on click button

button::-moz-focus-inner {
	border: none;
}

input {
	&[type="reset"]::-moz-focus-inner, &[type="button"]::-moz-focus-inner, &[type="submit"]::-moz-focus-inner, &[type="file"] > input[type="button"]::-moz-focus-inner {
		border: none;
	}
}

cool, man