CSS3 Button Styles

buttons.css.scss

@import "css3";

p.button {
  margin: 0 0 2em;}

h1.button {
  margin: 0;}

a.button {
  text-decoration: none;}

div.button {
  padding: 20px 0;}

/* button
---------------------------------------------- */
.button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  @include border-radius(3px); /* .5em*/
  @include box-shadow(0px, 1px, 2px, rgba(0,0,0,.2));
  &:hover {
    text-decoration: none; }
  &:active {
    position: relative;
    top: 1px;}

  &.bigrounded {
    @include border-radius(2em);}

  &.medium {
    font-size: 12px;
    padding: .4em 1.5em .42em;}

  &.small {
    font-size: 11px;
    padding: .2em 1em .275em;}
}


/* color styles
---------------------------------------------- */

/* black */
.black {
	color: #d7d7d7;
	border: solid 1px #333;
	background: #333;
  @include vertical-gradient('#666', '#000', "#666");
  &:hover {
    background: #000;
    @include vertical-gradient('#444', '#000', "#444");
  }
  &:active {
    color: #666;
    @include vertical-gradient('#000', '#444', "#000");
  }
}

/* gray */
.gray {
	color: #e9e9e9;
	border: solid 1px #555;
	background: #6e6e6e;
  @include vertical-gradient('#888', '#575757', "#888");
  &:hover {
    background: #616161;
    @include vertical-gradient('#757575', '#4b4b4b', "#757575");
  }
  &:active {
    color: #afafaf;
    @include vertical-gradient('#575757', '#888', "#575757");
  }
}

/* white */
.white {
	color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
  @include vertical-gradient('#fff', '#ededed', "#fff");
  &:hover {
    background: #ededed;
    @include vertical-gradient('#fff', '#dcdcdc', "#fff");
  }
  &:active {
    color: #999;
    @include vertical-gradient('#ededed', '#fff', "#ededed");
  }
}

/* orange */
.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
  @include vertical-gradient('#faa51a', '#f47a20', "#faa51a");
  &:hover {
    background: #f47c20;
    @include vertical-gradient('#f88e11', '#f06015', "#f88e11");
  }
  &:active {
    color: #fcd3a5;
    @include vertical-gradient('#f47a20', '#faa51a', "#f47a20");
  }
}

/* red */
.red {
	color: #faddde;
	border: solid 1px #980c10;
	background: #d81b21;
  @include vertical-gradient('#ed1c24', '#aa1317', "#ed1c24");
  &:hover {
    background: #b61318;
    @include vertical-gradient('#c9151b', '#a11115', "#c9151b");
  }
  &:active {
    color: #de898c;
    @include vertical-gradient('#aa1317', '#ed1c24', "#aa1317");
  }
}

/* blue */
.blue {
	color: #d9eef7;
	border: solid 1px #0076a3;
	background: #0095cd;
  @include vertical-gradient('#00adee', '#0078a5', "#00adee");
  &:hover {
    background: #007ead;
    @include vertical-gradient('#0095cc', '#00678e', "#0095cc");
  }
  &:active {
    color: #80bed6;
    @include vertical-gradient('#0078a5', '#00adee', "#0078a5");
  }
}

/* rosy */
.rosy {
	color: #fae7e9;
	border: solid 1px #b73948;
	background: #da5867;
  @include vertical-gradient('#f16c7c', '#bf404f', "#f16c7c");
  &:hover {
    background: #ba4b58;
    @include vertical-gradient('#cf5d6a', '#a53845', "#cf5d6a");
  }
  &:active {
    color: #dca4ab;
    @include vertical-gradient('#bf404f', '#f16c7c', "#bf404f");
  }
}

/* green */
.green {
	color: #e8f0de;
	border: solid 1px #538312;
	background: #64991e;
  @include vertical-gradient('#7db72f', '#4e7d0e', "#7db72f");
  &:hover {
    background: #538018;
    @include vertical-gradient('#6b9d28', '#436b0c', "#6b9d28");
  }
  &:active {
    color: #a9c08c;
    @include vertical-gradient('#4e7d0e', '#7db72f', "#4e7d0e");
  }
}

/* pink */
.pink {
	color: #feeef5;
	border: solid 1px #d2729e;
	background: #f895c2;
  @include vertical-gradient('#feb1d3', '#f171ab', "#feb1d3");
  &:hover {
    background: #d57ea5;
    @include vertical-gradient('#f4aacb', '#e86ca4', "#f4aacb");
  }
  &:active {
    color: #f3c3d9;
    @include vertical-gradient('#f171ab', '#feb1d3', "#f171ab");
  }
}

css3.sass

//
// Generic
//

=vendor($rule, $value)
  -webkit-#{$rule}: $value
  -moz-#{$rule}: $value
  -o-#{$rule}: $value
  -ms-#{$rule}: $value
  #{$rule}: $value

//
// Rounded Corners
//

=border-radius($radius)
  -moz-border-radius: $radius
  -webkit-border-radius: $radius
  border-radius: $radius
  
=border-top-left-radius($radius)
  -moz-border-radius-topleft: $radius
  -webkit-border-top-left-radius: $radius
  border-top-left-radius: $radius
  
=border-top-right-radius($radius)
  -moz-border-radius-topright: $radius
  -webkit-border-top-right-radius: $radius
  border-top-right-radius: $radius
  
=border-bottom-left-radius($radius)
  -moz-border-radius-bottomleft: $radius
  -webkit-border-bottom-left-radius: $radius
  border-bottom-left-radius: $radius
  
=border-bottom-right-radius($radius)
  -moz-border-radius-bottomright: $radius
  -webkit-border-bottom-right-radius: $radius
  border-bottom-right-radius: $radius

=border-top-radius($radius)
  +border-top-right-radius($radius)
  +border-top-left-radius($radius)
  
=border-bottom-radius($radius)
  +border-bottom-right-radius($radius)
  +border-bottom-left-radius($radius)
  
=border-left-radius($radius)
  +border-top-left-radius($radius)
  +border-bottom-left-radius($radius)
  
=border-right-radius($radius)
  +border-top-right-radius($radius)
  +border-bottom-right-radius($radius)
  
//
// Box Shadow
//

=box-shadow($x, $y, $blur, $color : black, $inset : false)
  @if $inset == "inset"
    -moz-box-shadow: inset $x $y $blur $color /* FF3.5+ */
    -webkit-box-shadow: inset $x $y $blur $color /* Saf3.0+, Chrome */
    box-shadow: inset $x $y $blur $color /* Opera 10.5, IE 9.0 */
  @else
    -moz-box-shadow: $x $y $blur $color /* FF3.5+ */
    -webkit-box-shadow: $x $y $blur $color /* Saf3.0+, Chrome */
    box-shadow: $x $y $blur $color /* Opera 10.5, IE 9.0 */
  // IE 6, 7
  filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$color}')"
  // IE 8
  -ms-filter: "\"progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$color}')\""
  
//
// Gradients
//

=vertical-gradient($from, $to, $bgcolor : "", $extra : "")
  @if $bgcolor != ""
    background-color: $bgcolor
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#{$from}), to(#{$to})) #{$extra}
  background-image: -moz-linear-gradient(top, #{$from}, #{$to}) #{$extra}
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}')
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}')"

=horizontal-gradient($from, $to, $bgcolor : "")
  @if $bgcolor != ""
    background-color: $bgcolor
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#{$from}), to(#{$to}))
  background-image: -moz-linear-gradient(top, #{$from}, #{$to})
  // No IE style that I'm aware of does this.


//
// Rotation
//

=rotate($degrees)
  $percent: $degrees / 360.0
  -moz-transform: rotate(#{$degrees}deg)
  -o-transform: rotate(#{$degrees})
  -webkit-transform: rotate(#{$degrees}deg)
  filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$percent})
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$percent})"
  
//
// Animation
//

=animate($properties:"all",$durations:"0.5s")
  +vendor(transition-property, $properties)
  +vendor(transition-duration, $durations)
  
//
// Box Model
//

=border-box
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  box-sizing: border-box

=transform($transformation)
  +vendor(transform,$transformation)

Screenshot http://cl.ly/1E2x2L0m0g2K0H2t3F3c