Gettin' SASSy

See the makings of our buttons used to be on this site

See the makings of our buttons used on this site and see how we build

How Our Buttons Used to be Built

We have since rebuilt our entire site based on a utility-first CSS framework called Tailwind CSS and we freaking love it. The bad thing about it is that this article no longer applies. But we are leaving it here because SASS/SCSS is pretty neat and because it's important to remember where you (and your code) came from.

See the makings of our buttons used on this site on this codepen!

See the Pen Sassy Buttons - HybridInteractive.io by Mark Busnelli Jr. (@encryptdesigns) on CodePen.

The modern-age of web development is a beautiful place. 10 years ago developers would have no way of setting globally used colors, margins, padding, etc. CSS Variables are gaining browser support but it's probably a ways off. So that's why we utilize SASS/SCSS variables along with our Gulp setup. We'll be diving into our Gulp setup in the coming weeks.

Our Base Button, we'll go over the last piece in a moment:

/******
Buttons
*******/
.button,
button {
    @include header( 1, 1, 0, 700, uppercase );
    @include transition( all 0.5s ease );
    display: inline-block;
    border: 2px solid transparent;
    text-decoration: none;
    line-height: 1;
    margin: 0 auto;
    outline: none;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 0;
    transform: scale( 1.0 );
    -webkit-backface-visibility: hidden;
    &:hover {
        transform: scale( 1.05 );
     }
    &.full-width {
        display: block;
        width: 100%;
    }
    &.centered {
        text-align: center;
    }
    /******* Size Styles ********/
    &.large {
        padding: 18px 35px;
    }
    &.small {
        padding: 12px 21px;
    }
     /******* Normal Styles ********/
    &.normal {
        @each $b in $buttons {
            &.#{ nth( $b, 1 ) } {
                background: #{ nth( $b, 2 ) };
                border: 2px solid #{ nth( $b, 3 ) };
                color: #{ nth( $b, 4 ) };
                &:hover {
                    background: #{ nth( $b, 5 ) };
                    border: 2px solid #{ nth( $b, 6 ) };
                    color: #{ nth( $b, 7 ) };
                }
            }
        }
    }
    /******* Outline Styles ********/
    &.outline {
        @each $b in $buttons {
            &.#{ nth( $b, 1 ) } {
                background: transparent;
                border: 2px solid #{ nth( $b, 6 ) };
                color: #{ nth( $b, 7 ) };
                &:hover {
                    background: #{ nth( $b, 2 ) };
                    border: 2px solid #{ nth( $b, 3 ) };
                    color: #{ nth( $b, 4 ) };
                }
            }
        }
    }
}

We first determine our base colors:

/******* Colors ********/
$white: #fff;
$black: #000;
$green: #BADA55;
$green-alt: #7B9B18;
$orange: #E8950C;
$red: #FF0000;
$purple: #570CE8;
$teal: #0DD6FF;

Then we setup a Map:

/******* Used for Coloring Buttons ********/
// ".{modifiername}", background, border color, color, background hover, border hover, hover color
$buttons: (
    ( "black", $black, transparent, $green, $green, $green, $green ),
    ( "white", $white, transparent, $black, $black, $black, $white ),
    ( "green", $green, transparent, $black, $black, $green, $green ),
    ( "green-alt", $green-alt, transparent, $white, $black, $green-alt, $green-alt ),
    ( "orange", $orange, transparent, $white, $white, $orange, $orange ),
    ( "red", $red, transparent, $white, $white, $red, $red ),
    ( "purple", $purple, transparent, $white, $white, $purple, $purple ),
    ( "teal", $teal, transparent, $white, $white, $teal, $teal )
);

Mapping is awesome. We're setting the stage on how we'll style all of our buttons.

&.normal {
        @each $b in $buttons {
            &.#{ nth( $b, 1 ) } {
                background: #{ nth( $b, 2 ) };
                border: 2px solid #{ nth( $b, 3 ) };
                color: #{ nth( $b, 4 ) };
                &:hover {
                    background: #{ nth( $b, 5 ) };
                    border: 2px solid #{ nth( $b, 6 ) };
                    color: #{ nth( $b, 7 ) };
                }
            }
        }
    }

We're basically setting up a map that allows us to loop through the map we setup to get specific values we need for background, border, and text color along with each's hover state too.

So we can use any color name in our template like "orange", "red", etc and are able to control it all in one place. Here's an example:

<a href="#" class="button normal large green">Button</a>

Now if we ever want to change the transition type, borders, font size or type, we can change that in one place thus keeping our code nice and DRY (Don't Repeat Yourself).

This is just a very small piece to the entire Hybrid website. We'll be going over how we built our mobile menu, hero's, CTA's and other pieces in the coming weeks.

About the author

Mark Busnelli Jr.

Mark is Hybrid Interactive's Co-Founder and CEO. He loves instilling passion and his infectious energy has been a mainstay in all he does.

Published Date: Jun 27, 2017 Updated: Sep 10, 2018

Contact Author