Skip to content

Instantly share code, notes, and snippets.

@MagicJoseph

MagicJoseph/index.html

Last active September 17, 2015 09:28
Show Gist options
  • Save MagicJoseph/f4ba15b631eb252d5128 to your computer and use it in GitHub Desktop.
Save MagicJoseph/f4ba15b631eb252d5128 to your computer and use it in GitHub Desktop.
Download ZIP
Sassy buttons
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Sassy buttons</title>
<link rel="stylesheet" href="sassy-buttons.css">
</head>
<body>
<div>
<button class="button primary">Button primary</button>
<button class="button default">Button default</button>
</div>
<div>
<button class="button primary">Button default size</button>
<button class="button primary small">Button small</button>
<button class="button primary medium">Button medium</button>
<button class="button primary large">Button large</button>
</div>
<div>
<button class="button primary radius">Button radius</button>
</div>
<div>
<button class="button primary block">Button block</button>
</div>
</body>
</html>
Raw
sassy-buttons.css
.button {
padding: 5px 10px;
font-size: 14px;
line-height: 1.4;
display: inline-block;
font-family: "Arial", Helvetica Neue, Helvetica, sans-serif;
margin: 0 0 20px 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
-webkit-transition: all 0.35s ease;
-moz-transition: all 0.35s ease;
-ms-transition: all 0.35s ease;
-o-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.button.radius {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
.button.button-block {
display: block;
width: 100%;
}
.button.small {
padding: 5px 10px;
font-size: 14px;
line-height: 1.2;
}
.button.medium {
padding: 7.5px 12.5px;
font-size: 16px;
line-height: 1.4;
}
.button.large {
padding: 9.5px 14.5px;
font-size: 18px;
line-height: 1.4;
}
.button.default {
background-color: #b3b3b3;
color: #fff;
border-color: #a5a5a5;
}
.button.default:hover, .button.default:focus, .button.default:active {
background-color: #9a9a9a;
color: #fff;
border-color: #8d8d8d;
}
.button.primary {
background-color: #84b8de;
color: #fff;
border-color: #4895ce;
}
.button.primary:hover, .button.primary:focus, .button.primary:active {
background-color: #5ca1d3;
color: #fff;
border-color: #4895ce;
}
Raw
sassy-buttons.scss
// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// ----
//
// autoprefixer @mixin
//
$prefixes:
"-webkit-",
"-moz-",
"-ms-",
"-o-",
null;
@mixin prefixer($property, $value...) {
@each $prefix in $prefixes {
#{$prefix}#{$property}: #{$value};
}
}
//
// .button variables
//
$button-font-family: "Arial", Helvetica Neue, Helvetica, sans-serif !default;
$button-font-size: 14px !default;
$button-line-height: 1.4 !default;
$button-font-weight: 400 !default;
$button-margin: 0 0 20px 0 !default;
$button-padding-vertical: 5px !default;
$button-padding-horizontal: 10px !default;
$button-font-color: #fff !default;
$button-font-color-alt: #333 !default;
$button-font-color-hover: $button-font-color !default;
$button-font-color-hover-alt: $button-font-color-alt !default;
$button-bg-color: #fff !default;
$button-border-color: darken(#f2f2f2, 10%) !default;
$button-border-radius: 4px !default;
$button-adjust: true !default;
$button-block-availability: true !default;
//
// .button @mixins
//
@mixin button-size(
$padding-vertical: $button-padding-vertical,
$padding-horizontal: $button-padding-horizontal,
$font-size: $button-font-size,
$line-height: $button-line-height) {
padding: $padding-vertical $padding-horizontal;
font-size: $font-size;
line-height: $line-height;
}
@mixin button-style(
$font-color: $button-font-color,
$font-color-alt: $button-font-color-alt,
$font-color-hover: $button-font-color-hover,
$font-color-hover-alt: $button-font-color-hover-alt,
$bg-color: $button-bg-color,
$adjust: $button-adjust,
$border-color: $button-border-color ) {
background-color: $bg-color;
@if $adjust {
color: if( lightness($bg-color) > 70%, $font-color-alt, $font-color);
border-color: darken($bg-color, 15%);
} @else {
color: $font-color;
border-color: $border-color;
}
&:hover, &:focus, &:active {
background-color: darken($bg-color, 10%);
@if $adjust { color: if( lightness($bg-color) > 70%, $font-color-hover-alt, $font-color-hover); }
@else { color: $font-color-hover; }
border-color: darken($bg-color, 15%);
}
}
@mixin button-base(
$font-family: $button-font-family,
$font-weight: $button-font-weight,
$margin: $button-margin,
$border-radius: $button-border-radius,
$block: $button-block-availability) {
@include button-size();
display: inline-block;
font-family: $button-font-family;
margin: $button-margin;
font-weight: $button-font-weight;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
@include prefixer("transition", all .35s ease);
@if $border-radius {
&.radius { @include prefixer("border-radius", $border-radius); }
}
@if $block {
&.button-block {
display: block;
width: 100%;
}
}
}
@mixin button() {
@include button-base($block: true);
// .button sizes
&.small { @include button-size($padding-vertical: 5px, $padding-horizontal: 10px, $font-size: 14px, $line-height: 1.2); }
&.medium { @include button-size($padding-vertical: 7.5px, $padding-horizontal: 12.5px, $font-size: 16px, $line-height: 1.4); }
&.large { @include button-size($padding-vertical: 9.5px, $padding-horizontal: 14.5px, $font-size: 18px, $line-height: 1.4); }
// .button colors
&.default { @include button-style($font-color: #fff, $font-color-hover: #fff, $bg-color: #b3b3b3, $border-color: #a5a5a5, $adjust: false); }
&.primary { @include button-style($bg-color: #84b8de, $border-color: #75a9d0); }
}
.button {
@include button();
}
@MagicJoseph
Copy link
Author

Codepen.io
http://codepen.io/anon/pen/avNBRm?editors=101

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