Sass Button

gistfile1.sass

.btn{
	display: inline-block;
	padding: 0 15px;
	text-align: center;
	text-decoration: none;
	@include border-radius(5px);
	cursor: pointer;
}
@mixin main-cta($g1, $g2){
	@extend .btn;
	height: 31px;
	line-height: 30px;
	background-image: linear-gradient(-180deg, $g1 0%, $g2 100%);
	box-shadow: inset 0px 1px 1px 0px rgba(200,239,255,0.50), inset 0px -4px 4px 0px rgba(201,238,255,0.10);
	font-size: 14px;
	color: #fff;
	text-shadow: 0px 1px 1px darken($g2, 20%);
	border: 1px solid $g2;
	&:hover{
		background: #fff;
		background-image: linear-gradient(-180deg, darken( $g1, 10%) 0%, darken( $g2, 10%) 100%);
		opacity: 1.0;
	}
	&:active{
		-moz-box-shadow: inset 0 0 10px #555;
		-webkit-box-shadow: inset 0 0 10px #555;
		box-shadow: inset 0 0 10px #555;
	}
}