Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Pen by Una Kravets.
@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;
}
}
<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

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

A Pen by Una Kravets on CodePen.

License.

@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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.