Create a Sass button/element mixin

This mixin is one I’ve been using for a few months now to create buttons/anything with a particular style. I call it an element mixin, as it’s not tied to anything. It started off as a plain button mixin, though I found sometimes I just want a button reset (some padding, no border, etc) or no hover/active states. This a very customisable mixin with simple parameters.

Note: Some things rely on compass existing, or some variables set such as $element for a font family. I’ve defined them at the top, but you’ll probably have your own. The size parameter uses this pixel to em function @function em($target-px, $context) { @return ($target-px / $context) * 1em; }.

The code and explanation

The easiest way to get this across is to give the code and follow up with an explanation for my decisions in the way I have done it. Head over to the github gist, then let’s get into the explanation.

View github gist

Firstly we have the element base, what every button will contain just separated from the mixin itself.

We have our mixin parameters, which are fairly self explanatory, they all come with a fairly sensible default. The great thing about it is you don’t have to remember the order of the parameters you can just do for example @include element(red, $radius: 10px);.

I’ll guide you through the intentions of each parameter they’re fairly easy to grasp:

$main-color is self explanatory pass any colour you wish.

$radius give your button a radius I have a radius tied to a variable usually to keep it consistent throughout my site.

$subtle if you want a discrete button that comes to life on hover set this to true.

$shadow disable this if you want a flatter looking button.

$style disable this, if you would like a button reset as your starting point. As I’ve found when making some sites, it wasn’t always possible to go with my element style so a quick button base is helpful.

$size pass any of the keywords within the if statements. This can be added to, if you wish, to have more varied styles.

$hover sometimes you don’t need hover states. This is also paired with active, as I find for me, at least, I’ll always want an active state with a hover state.

$font-size sometimes I encountered times where it didn’t work to have the font-size set on smaller sizes, so the option is there to make it false.

$weight like $font-size weight can be changed.

$display sometimes it’s ideal to have a block button. More often than not you’ll want inline-block, so that’s the default.

Usage

@include element(#88a23d, $radius: 4px, $size: normal, $hover: true);

Chances are I’ll be updating this somewhat regularly. To make the code more efficient. You’ll be able to see the changes from viewing the gist.

View on Github