Easy button generation with color and size input -- considering text-to-background color contrast and size
A Pen by Una Kravets on CodePen.
<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 |
@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; | |
} |