_buttons.scss

// Author: Ryan Warner
// Email: warner.ryan@gmail.com

@import "compass/css3";

@mixin buttons(){
	@include button;
	&.orange { @include button($gradient-top-color:#b0a999, $gradient-bottom-color:#756f64); }
	&.purple { @include button($gradient-top-color:#b099af, $gradient-bottom-color:#756474); }
}

@mixin button($width:226px, $height:39px, $innershadow-height:-3px, $gradient-top-color:rgba(154,161,176,1), $gradient-bottom-color:rgba(100,105,117,1)){
	$dropshadow-color: darken($gradient-bottom-color, 15%);
	width:$width;
	height:$height;
	cursor:pointer;
	margin-bottom:14px;
	text-align:center;
	color:#f8f5f2;
	font-size:16px;
	line-height:39px;
	@include text-shadow(0px 1px 1px rgba(0,0,0,.55));
	@include background-image(linear-gradient($gradient-top-color, $gradient-bottom-color));
	@include border-radius(10px);	
  	@include box-shadow(0px $innershadow-height 0px 0px darken($gradient-bottom-color, 15%) inset, 0px 1px 0px 0px rgba(255,255,255,.6) inset);
	border: 1px solid $dropshadow-color;
	background-color:$dropshadow-color;

	&:hover{
		@include background-image(linear-gradient(lighten($gradient-top-color, 3%), lighten($gradient-bottom-color, 3%)));
	}

	&:active{
		@include background-image(linear-gradient($gradient-bottom-color, $gradient-top-color));
		@include box-shadow(0px 1px 0px 0px #fff, inset 0 0 10px rgba(0,0,0,.7));
	}
}