Skip to content

Instantly share code, notes, and snippets.

@raecoo

raecoo/buttons.css.scss

Created April 26, 2012 08:03
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save raecoo/2497354 to your computer and use it in GitHub Desktop.
Save raecoo/2497354 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 Button Styles
Raw
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");
}
}
Raw
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)
@raecoo
Copy link
Author

raecoo commented Apr 26, 2012

Screenshot http://cl.ly/1E2x2L0m0g2K0H2t3F3c

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment