A Pen by Una Kravets.

button-mixin-clean

@import "compass/utilities/color/contrast";

$contrasted-dark-default: #333333;
$contrasted-light-default: #e7e7e7;
$contrasted-lightness-threshold: 50%;

@mixin button($color, $size) {
	$push-height: 2px;
	$border-color: darken($color, 40%);
	$font-size: 1em;
	
	@if $size == "big" {
		$push-height: 6px;
		$font-size: 1.5em;
	}

	@if lightness($color) < 20%{
		$border-color: darken($color, 80%);
	}
	@if lightness($color) > 80%{
		$border-color: darken($color, 10%);
	}
	
	@include contrasted($color);
	background: $color;
	border: none;
	border-bottom: $push-height*2 $border-color solid;
	font-size: $font-size;
	margin-top: 0;
	padding: 0.4em 2em;
	position: absolute;
	&:hover {
		margin-top: $push-height;
		border-bottom: $push-height $border-color solid;
	}
	&:active, &:focus {
		outline-color: transparent;
		outline-style: none;
		border-bottom: none;
		margin-top: $push-height*2;
		margin-bottom:-2px;
	}
}

index.html

<button class="button1">Button 1</button>
<button class="button2">Button 2</button>
<button class="button3">Button 3</button>
<button class="button4">Button 4</button>
<button class="button5">Button 5</button>
<!-- notes to self:
      Mixin writing tips: 
      - do all of your if statements at the begining and save the result as a variable if you can -- this will declutter your code alot

Sass-Buttons-WIP.markdown

Sass Buttons WIP

Easy button generation with color and size input -- considering text-to-background color contrast and size

A Pen by Una Kravets on CodePen.

License.

style.scss

@import "compass";
@import "compass/utilities/color/contrast";

$contrasted-dark-default: #333333;
$contrasted-light-default: #e7e7e7;
$contrasted-lightness-threshold: 50%;

  
@mixin button($color, $size) {
  $push-height: 2px; //default be4 reading size
  $border-color: darken($color, 40%); //default be4 color testing
  $font-size: 1em;
  
  // a larger button has a bigger area of movement and font-size
  @if $size == "big" {
    $push-height: 6px;
    $font-size: 1.5em;
  }

  //the following determine how dark to make the bottom-border of the button depending on the lightness of the actual background color of the button
  @if lightness($color) < 20%{
    $border-color: darken($color, 80%);
  }
  @if lightness($color) > 80%{
    $border-color: darken($color, 10%);
  }

  @include contrasted($color); // text color white on dark bgs, & visa versa
  background: $color;
	border: none; //as a reset
  border-bottom: $push-height*2 $border-color solid;
	font-size: $font-size;
	margin-top: 0; //must start at 0 because movement illusion achieved by adding a margin-top
	padding: 0.4em 2em;
  position: absolute;
	&:hover {
		margin-top: $push-height;
    border-bottom: $push-height $border-color solid;
	}
	&:active, &:focus {
    outline-color: transparent; //resets from native styling
    outline-style: none; //resets from native styling
		border-bottom: none; //resets from native styling
		margin-top: $push-height*2;
		margin-bottom:-2px;
	}
  
}

//COLORS!
$toad-blue: #93d0ff;
$bowser-red: #741b0b;
$peach-pink: #feb8c6;
$yoshi-green: #3b8f47;
$boo-purple: #2c2d4b;

.button1 {
  @include button($toad-blue, big);
}

.button2 {
  @include button($bowser-red, small);
  left: 250px;
}

.button3 {
  @include button($peach-pink, big);
  left: 400px;
}

.button4 {
  @include button($yoshi-green, small);
  left: 650px;
}

.button5 {
  @include button($boo-purple, big);
  left: 850px;
}