<article class="demo-desc">
  <h1>Sass flat-button generator</h1>
  <p>A Sass mixin that creates flat buttons with custom icons in variable positions. Follow me
    <a href='https://twitter.com/awesomephant'>@awesomephant</a> for updates.
<section class='demo'>
<a href='#' class='danger'>Delete that thing.</a>  
<a href='#' class='power'>Turn on the energy.</a>  
<a href='#' class='signup'>Sign Up</a>
<a href='#' class='save'>Save</a>
<a href='#' class='fb'>Like us on Facebook</a>
<a target='blank' href='https://twitter.com/awesomephant' class='twitter'>Follow me @awesomephant!</a>
<article class='demo-desc'>
    <li>Variable background color</li>
    <li>Custom icons left or right of the text</li>
    <li>No extra markup, uses pseudo-elements.</li>
    <li>Optional rounded corners</li>
 // Arguments: background-color; rounded-corners, icon, icon-position     
.signup  { @include button($blue, false, 'tick', left)  ;}</pre>
@import "compass/css3";

@import url(http://weloveiconfonts.com/api/?family=entypo);

The Icon-object™

The Icon-Object™ that holds the unicode entities for our icons, so we can reference them by name instead of looking up the hex code every time we need one.

$icons: ('save' '\1F4BE'),
        ('delete' '\12as'),
        ('fb' '\F30E'),
        ('twitter' '\F309'),
        ('bolt' '\26A1'),
        ('danger' '\26A0'),
        ('tick' '\2713');

Color variables are imported from another pen, just to make stuff easier to read

The Button Mixin.======

=It takes 3 arguments:=
- the background-color ($bg),
in our case we will pass it the color vars we defined above.

- the icon ($icon),
takes one of the named icons from the Icon-Object™

- the icon position ($iconPosition)
Vald values are 'left' and 'right'

=And does fancy stuff=
1. Figure out the lightness of the passed background-color via the lightness() function and set either a dark or a light text color.

2. Loop over the Icon-Object™ until the name matches the passed $icon parameter and then

  2.1 If $iconPosition == right select the :after element and set the corresponding unicode entity as the 'content' value. 

@mixin button($bg, $rounded: false, $icon:none, $iconPosition: right){
  $color: black;
  padding: 1.2em 2.3em;
  Setting the color based on the background, as described above (1)
  @if lightness($bg) > 68% {
    $color: desaturate(darken($bg, 35), 70);
    &:hover, &:focus {
      background: darken($bg, 5);
      color: darken($color, 5);
  @else {
    $color: lighten($bg, 35);
    &:hover, &:focus {
      background: darken($bg, 5);
      color: lighten($color, 5);
  Adding the icons, see (2)
  @each $thing in $icons{
    @if nth($thing, 1) == $icon {
      @if $iconPosition == right {  
        padding-right: 3.5em;   
        &:after {
           content: nth($thing, 2);
           right: 1.5em;
      @if $iconPosition == left {  
        padding-left: 3.5em;     
        &:before {
           content: nth($thing, 2);
           left: 1.5em;
  color: $color;
  display: inline-block;
  background: $bg;
  @include transition(.3s);
    family: sans-serif;
    weight: 800;
    size: .8em;
    transform: uppercase;
    decoration: none;
  @if $rounded == true {border-radius: .7em};
  border-bottom: .2em solid darken($bg, 7);
  position: relative;
  &:before, &:after{
    display: inline-block;
    font-family: entypo;
    position: absolute;    
  &:active {
    @include transform(scale(.92));
  &:hover, &:focus {
            @if $rounded == true {border-radius: .5em;}
    box-shadow: 0 0 0 5px lighten($bg, 20);

Calling the Mixin for the different buttons
.danger  { @include button($red, false, 'danger')   ;}
.signup  { @include button($blue, false, 'tick', left)  ;}
.save    { @include button($green, false, 'save', right);}
.fb      { @include button($fb-blue, false, 'fb', left); }
.twitter { @include button($twitter-blue, false,        'twitter', left); }
.power { @include button($yellow, 'bolt', right); }

Base Styles
.demo a {margin: 1em;}
View Compiled

External CSS

  1. https://codepen.io/awesomephant/pen/frmlu.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.