Simple Sass buttons
http://nadeemkhedr.wordpress.com/2014/02/22/why-sass-is-awesome-make-an-elegant-button-with-only-one-color-to-generate/
HTML
<div>
<a class='my-btn'>My Button</a>
<a class='my-btn disabled'>My Button</a>
</div>
<div>
<a class='my-btn my-btn-primary'>My Button</a>
<a class='my-btn my-btn-primary disabled'>My Button</a>
</div>
<div>
<a class='my-btn my-btn-grey'>My Button</a>
<a class='my-btn my-btn-grey disabled'>My Button</a>
</div>
<div>
<a class='my-btn my-btn-danger'>My Button</a>
<a class='my-btn my-btn-danger disabled'>My Button</a>
</div>
SCSS
div {
margin-bottom: 20px;
}
/* Colors */
$btn-danger: #DA4F49;
$btn-default: #f96b2d;
$btn-primary: #3196cb;
$btn-grey: #999;
$btn-grey-hover: #777;
$btn-color: white;
/* Mixins */
@mixin btn-theme($btn-color) {
background: transparent;
border-color: darken($btn-color, 10%);
}
@mixin btn-theme-hover($btn-color, $hover-color: "") {
@if $hover-color == "" {
$hover-color: saturate($btn-color, 10%);
$hover-color: darken($hover-color, 10%)
}
background: $hover-color;
border-color: darken($btn-color, 20%);
}
@mixin btn-theme-disabled($btn-color) {
background: lighten($btn-color, 20%);
border-color: lighten($btn-color, 10%);
}
/* Primary button class with default color (orange) */
.my-btn {
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
padding: 5px 12px;
border-radius: none;
display: inline-block;
border:1px solid;
color: $btn-color;
@include btn-theme($btn-default);
}
.my-btn:hover {
color: $btn-color;
text-decoration: none;
@include btn-theme-hover($btn-default);
}
.my-btn.disabled, .my-btn.disabled:hover {
-webkit-user-select: none;
pointer-events: none;
cursor: not-allowed;
opacity: .65;
@include btn-theme-disabled($btn-default);
}
/* Different versions of the button (extending) */
.my-btn.my-btn-primary {
@include btn-theme($btn-primary);
}
.my-btn.my-btn-primary:hover {
@include btn-theme-hover($btn-primary);
}
.my-btn.my-btn-primary.disabled, .my-btn.my-btn-primary.disabled:hover {
@include btn-theme-disabled($btn-primary);
}
.my-btn.my-btn-grey {
@include btn-theme($btn-grey);
}
.my-btn.my-btn-grey:hover {
@include btn-theme-hover($btn-grey, $btn-grey-hover);
}
.my-btn.my-btn-grey.disabled, .my-btn.my-btn-grey.disabled:hover {
@include btn-theme-disabled($btn-grey);
}
.my-btn.my-btn-danger {
@include btn-theme($btn-danger)
}
.my-btn.my-btn-danger:hover {
@include...