Skip to content

Instantly share code, notes, and snippets.

@sugarenia
Created November 15, 2013 11:05
Show Gist options
  • Save sugarenia/7482701 to your computer and use it in GitHub Desktop.
Save sugarenia/7482701 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<button class="btn btn--primary">Primary button</button>
<button class="btn btn--secondary">Secondary button</button>
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
@import "compass";
// Button mixin
@mixin button($background-color, $text-color) {
@include background(linear-gradient(lighten($background-color, 3%), darken($background-color, 3%)));
color: $text-color;
@if lightness($text-color) < 50% {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
} @else {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
&:hover,
&.hover {
@include background(linear-gradient(lighten($background-color, 5%), darken($background-color, 1%)));
text-decoration: none;
}
}
// Basic button styles
// You can convert this to a placeholder and extend it in the button variations below, but I like the multiple class approach myself
.btn {
cursor: pointer;
border: none;
border-radius: 2px;
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 8px 16px;
box-shadow: 0 1px 2px black(0.1), inset 0 1px 0 white(0.15), inset 0 -1px 0 black(0.15);
font: bold 14px "Helvetica Neue", Helvetica, sans-serif;
white-space: nowrap;
&:active,
&.active {
outline: none;
position: relative;
top: 1px;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
}
// Colour variations
.btn--primary { @include button(#ea6ca4, #fff); }
.btn--secondary { @include button(#d6d6d6, #707070); }
.btn {
cursor: pointer;
border: none;
border-radius: 2px;
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 8px 16px;
box-shadow: 0 1px 2px black(0.1), inset 0 1px 0 white(0.15), inset 0 -1px 0 black(0.15);
font: bold 14px "Helvetica Neue", Helvetica, sans-serif;
white-space: nowrap;
}
.btn:active, .btn.active {
outline: none;
position: relative;
top: 1px;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
.btn--primary {
background: -moz-linear-gradient(#ec79ac, #e85f9c);
background: -o-linear-gradient(#ec79ac, #e85f9c);
background: -webkit-linear-gradient(#ec79ac, #e85f9c);
background: linear-gradient(#ec79ac, #e85f9c);
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.btn--primary:hover, .btn--primary.hover {
background: -moz-linear-gradient(#ed82b2, #e968a1);
background: -o-linear-gradient(#ed82b2, #e968a1);
background: -webkit-linear-gradient(#ed82b2, #e968a1);
background: linear-gradient(#ed82b2, #e968a1);
text-decoration: none;
}
.btn--secondary {
background: -moz-linear-gradient(#dedede, #cecece);
background: -o-linear-gradient(#dedede, #cecece);
background: -webkit-linear-gradient(#dedede, #cecece);
background: linear-gradient(#dedede, #cecece);
color: #707070;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.btn--secondary:hover, .btn--secondary.hover {
background: -moz-linear-gradient(#e3e3e3, #d3d3d3);
background: -o-linear-gradient(#e3e3e3, #d3d3d3);
background: -webkit-linear-gradient(#e3e3e3, #d3d3d3);
background: linear-gradient(#e3e3e3, #d3d3d3);
text-decoration: none;
}
<button class="btn btn--primary">Primary button</button>
<button class="btn btn--secondary">Secondary button</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment