Hi. we're hybrid interactive

Gettin’ SASSy

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

See the Pen Sassy Buttons Version 2 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>

Here’s a live version:

Button

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.