hsquareweb
10/12/2012 - 8:27 PM

CSS: Gradient Button for IE9

CSS: Gradient Button for IE9

@import "compass";
$txtColor: #7d7d7d;
$btnTop: #e5eff6;
$btnBottom: #A8C2D3;
$btnBorder: #b7cfdd;

.button, button {
  display: inline-block;
  cursor: pointer;
	padding: 5px 7px;
	border: 1px solid $btnBorder;
	border-radius: 5px;
	color: $txtColor;
	font-weight: 700;
	background: $btnTop;
	text-shadow: 0 1px 0 #FFF;
	@include box-shadow(
		inset 0 0 15px rgba(#fff,0.3),
		inset 0 -2em 3em -1.5em $btnBottom,
		0 1px 3px 0 rgba(#000,0.3));

  margin: 5em;
  
	&:hover {
		@include box-shadow(
			inset 0 0 15px rgba(#fff,0.3),
			0 1px 3px 0 rgba(#000,0.3));
		color: darken($btnBottom,30%);
	}
}