Generated by SassMeister.com.

SassMeister-input-HTML.html

<p class="btn">Button</p>

SassMeister-input.scss

// ----
// libsass (v3.0.1)
// ----

/* # Beautons

is a beautifully simple button toolkit. Copyright 2013 Harry Roberts
<http://csswizardry.com/beautons/>

## Example use

```scss

    @import "ui/buttons/_beautons";
    
    MyBeautonClass {
        @include btn;
        @include btn--norm;
    
        &.small{
            @include btn--small;
        }
        &.large{
            @include btn--large;
        }
        &.huge{
            @include btn--huge;
        }
        &.full{
            @include btn--full;
        }
    
        &.positive{
            @include btn--positive;
        }
        &.negative{
            @include btn--negative;
        }
        &.inactive {
            @include btn--inactive;
        }
    }

```

Markup:
<a class="MyBeautonClass $modifierClass"></a>

.small  - Size small : @include btn--small
.large  - Siz large : @include btn--large
.huge   - Huge size : @include btn--huge
.full   - Display a blowk button feet the parent container width : @include btn--full
.positive   - Call to action style button @include btn--positive
.inactive   - disabled state @include btn--inactive
.negative   - Negative action @include btn--negative


@import "compass/color/contrast" - {obsolete} Use the Color contrast mixins to optimize readability of text and background
@todo  - Move color-contrasted mixin in the libs, actually embed in this component

Styleguide components.ui.buttons.beautons
*/

// @import "compass/utilities/color/contrast";

// ------------------------------------------------*/
// MIXINS & FUNCTIONS
// ------------------------------------------------*/
// LINEAR to LOGARITHMIC and vicev-ersa
@function lin2log($n) { @if $n <= 0.0031308 { @return $n * 12.92; } @else { @return 1.055 * pow($n,1/2.4) - 0.055; } }
@function log2lin($n) { @if $n <= 0.04045 { @return $n / 12.92; } @else { @return pow((($n + 0.055)/1.055),2.4); } }

// sRGB BT-709 BRIGHTNESS
@function brightness($color) {
  @if type-of($color) == color {
    @return (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) / 255 * 100%;
  }
  @else {
    @return unquote("brightness(#{$color})");
  }
}

// Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"
@function color-contrast($color, $dark: $dark-text-default, $light: $light-text-default) {
  @if $color == null {
    @return null;
  }
  @else {
    $color-brightness: brightness($color);  
    $light-text-brightness: brightness($light);
    $dark-text-brightness: brightness($dark);
    
    @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);  
  }
}

$contrasted-light-default: white !default;
$contrasted-dark-default: black !default;

@mixin contrasted($background-color, $dark: $contrasted-dark-default, $light: $contrasted-light-default) {
    background-color: $background-color;
    color: color-contrast($background-color, $dark, $light);
}


$button-bg-color : #2c77ba !default;
$button-color : white !default;


// - BASE -----------------------------

@mixin btn{
	display:inline-block;
	vertical-align:middle;
	white-space:nowrap;
	font-family:inherit;
	font-size:100%;
	cursor:pointer;
	border:none;
	margin:0;
	border-radius:4px;
	overflow:visible;
	text-decoration: none;
	&:hover, &:active, &:focus, &:visited {
		text-decoration: none;
	}
	&:hover{
	    box-shadow:0 0 5px rgba(0, 0, 0, 0.5);
	}
	&:active, &:focus {
            outline:none;
            box-shadow:0 0 5px rgba(0, 0, 0, 0.5) inset;
	}
	&::-moz-focus-inner {
		border: 0;
		padding: 0;
	}
}

// - SIZES ----------------------------

@mixin btn--small{
	padding: 0 0.5em;
	line-height:2;
	height:     2em;
}

@mixin btn--normal {
	line-height:3;
	height: 3em;
	padding: 0 1em;
}

@mixin btn--large{
	padding: 0 1.5em;
	line-height:4;
	height:     4em;
}

@mixin btn--huge{
	padding: 0 2em;
	line-height:5;
	height:     5em;
}

@mixin btn--block{
	width:100%;
	padding-right:0;
	padding-left: 0;
	text-align:center;
}

// - FONT SIZES -----------------------

@mixin btn--alpha{
	font-size:3rem;
}

@mixin btn--beta{
	font-size:2rem;
}

@mixin btn--gamma{
	font-size:1rem;
}


@mixin btn--natural{
	vertical-align:baseline;
	font-size:inherit;
	line-height:inherit;
	height:auto;
	padding-right:0.5em;
	padding-left: 0.5em;
}

// - FUNCTIONS ------------------------
@mixin btn--default {
    background-color: $button-bg-color;
    @include contrasted($button-bg-color);
    &:hover{
         @include contrasted($button-bg-color);
    }
}

@mixin btn--primary($color--primary:blue){
    background-color: $color--primary;
    @include contrasted($color--primary);
    &:hover{
         @include contrasted($color--primary);
    }
}

@mixin btn--secondary($color--secondary:green){
    background-color: $color--secondary;
    @include contrasted($color--secondary);
    &:hover{
         @include contrasted($color--secondary);
    }
}
@mixin btn--tertiary($color--tertiary: orange){
        background-color: $color--tertiary;
    @include contrasted($color--tertiary);
    &:hover{
         @include contrasted($color--tertiary);
    }
}


@mixin btn--positive{
	background-color:#4A993E;
	color:#fff;
}

@mixin btn--negative{
	background-color:#b33630;
	color:#fff;
}

@mixin btn--inactive{
	&:hover,
	&:active,
	&:focus{
		background-color:#ddd;
		color:#777;
		cursor:default;
		box-shadow:none;
	}
}

// - RADIUS ---------------------------

@mixin btn--soft{
    border-radius:5em;
}


@mixin btn--hard{
    border-radius:0;
}

// ------------------------
// Test
// ------------------------
.btn {
  @include btn;
  @include btn--large;
  border:3px solid silver;
}

SassMeister-output.css

/* # Beautons

is a beautifully simple button toolkit. Copyright 2013 Harry Roberts
<http://csswizardry.com/beautons/>

## Example use

```scss

    @import "ui/buttons/_beautons";
    
    MyBeautonClass {
        @include btn;
        @include btn--norm;
    
        &.small{
            @include btn--small;
        }
        &.large{
            @include btn--large;
        }
        &.huge{
            @include btn--huge;
        }
        &.full{
            @include btn--full;
        }
    
        &.positive{
            @include btn--positive;
        }
        &.negative{
            @include btn--negative;
        }
        &.inactive {
            @include btn--inactive;
        }
    }

```

Markup:
<a class="MyBeautonClass $modifierClass"></a>

.small  - Size small : @include btn--small
.large  - Siz large : @include btn--large
.huge   - Huge size : @include btn--huge
.full   - Display a blowk button feet the parent container width : @include btn--full
.positive   - Call to action style button @include btn--positive
.inactive   - disabled state @include btn--inactive
.negative   - Negative action @include btn--negative


@import "compass/color/contrast" - {obsolete} Use the Color contrast mixins to optimize readability of text and background
@todo  - Move color-contrasted mixin in the libs, actually embed in this component

Styleguide components.ui.buttons.beautons
*/
.btn {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  font-family: inherit;
  font-size: 100%;
  cursor: pointer;
  border: none;
  margin: 0;
  border-radius: 4px;
  overflow: visible;
  text-decoration: none;
  padding: 0 1.5em;
  line-height: 4;
  height: 4em;
  border: 3px solid silver; }
  .btn:hover, .btn:active, .btn:focus, .btn:visited {
    text-decoration: none; }
  .btn:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
  .btn:active, .btn:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) inset; }
  .btn::-moz-focus-inner {
    border: 0;
    padding: 0; }

SassMeister-rendered.html

<p class="btn">Button</p>