SASS Tutorial

Using Mixins for Your Button Styles

Posted on by

I’m always in search of better ways to improve my workflow and anything that can help my CSS be more consistent and easy to manage. My biggest kick lately, is coming up with mixins that help me cut down on writing repetitive CSS. One of my biggest issues were buttons and when I started to really think about it, there is just a laundry list of things that are a pain with writing buttons. Each button needs a hover and active state. Is each hover consistent with the rest of the hovers, whether it be the lightening/darkening of a color, box shadow, border, etc. There are so many possibilities for hover and active states when it comes to buttons.

The Issue Styling Buttons

Typically, you will want to keep your interactions consistent throughout the site. You wouldn’t want some buttons to get darker when hovering, while some get lighter, or others change text color. This requires an intense amount of attention to detail when coding and styling your buttons, but thanks to mixins, we can write all of those nitty gritty interactive styles just once and apply them to all buttons and keep all of the interactions consistent on all of the buttons you choose to apply this mixin to.

For anyone newer to SASS and/or mixins, you can use undefined variables to create your mixin, and when you do your include, the variable is created and used all throughout that mixin. Below is an example of a button mixin created to keep all of my button background hovers and active states consistent for all of my buttons throughout my site.

Button Mixin

SASS


@mixin button-bg($bg) {
  background: $bg;
  &:hover {
    background:darken($bg,8%);
    transition: all 0.3s ease;
  }
  &:active {
    background:darken($bg,25%);
  } 
}

Explanation

Let’s dig a little deeper in to what this code actually means. First, we initialize the mixin with the @mixin code and then we can call it whatever we want. In this instance, the purpose of the mixin is to define the button’s background color and control it’s hover and active states, so I’ve chosen to call it button-bg. Since we don’t know want to limit ourselves in background colors, I created a variable of $bg at the end of the mixin, which is where you will eventually end up defining your background color.

Now, the rest of the code should look familiar, and you’ll see that you’re defining a background color, and then when hovering, darkening your background color, then on active states, darkening even further. You’ll notice that it uses that same variable of $bg within the actual CSS. Once you define that variable when declaring that mixin to an element, it will fill all of those $bg variables with your color, keeping everything nice and consistent and also keeps your from writing multiple instances of hover and active states for all of your buttons.

Ok cool, we have a mixin written, now let’s use it. Below is how you will call that mixin and define your button’s background color.

Usage

CSS


.button-green {
  @include button-bg(green);
}

.button-blue {
  @include button-bg(blue);
}

.button-yellow{
  @include button-bg(yellow);
}

.button-red {
  @include button-bg(red);
}

There you have it. You’ve now just created 4 different color buttons with hover and active states with only writing a single line. This is just one of the possibilities of using mixins and creating consistent styles and easier to read stylesheets. To experiment with this code on your own, I’ve created a Codepen for a demonstration.

View Demo

Leave a Reply