Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$fs--big: 18px;
$default-map: (
	action-height: 38px,
);

$colors: (
    default: #fff,
    alternate: #f5f5f5,
    primary: #f15a22
);

$social-colors: (
	facebook: #3b5998,
	twitter: #55acee,
	linkedin: #0077b5
);

@function color($key) {
    @if map-has-key($colors, $key) {
        @return map-get($colors, $key);
    } @else if map-has-key($social-colors, $key) {
		    @return map-get($social-colors, $key);
	} @else {
		    @warn "Unknown `#{$key}` in $colors";
		    @return null;
	}
}

@mixin border-radius($size) {
    -webkit-border-radius: $size;
    -moz-border-radius: $size;
    -o-border-radius: $size;
    -ms-border-radius: $size;
    -khtml-border-radius: $size;
    border-radius: $size;
}

$button-map: (
    size-ratio: 5px,
    size-radius: 3px,
    font-family-regular: 'Asap-regular',
    font-family-bold: 'Asap-bold',
    font-size: $fs--big,
    border: 0 none,
    height: map-get($default-map, action-height)
);

@mixin ET-button-color($bg-col, $txt-col, $type) {
    cursor: pointer;
    color: $txt-col;
    background-color: $bg-col;

    &:hover,
    &:focus {
        background-color: lighten($bg-col, 10%);
    }

    &:active {
        background-color: darken($bg-col, 5%);
    }

    @if $type == 'social' {
        $colors: map-keys($social-colors);

        @each $color in $colors {
            &--#{$color} {
                $color: color(#{$color});
                background-color: $color;
                border: 2px solid #{$color};

                &:hover,
                &:focus {
                    background-color: lighten($color, 10%);
                }

                &:active {
                    background-color: darken($color, 5%);
                }
            }
        }
    }
}

@mixin ET-button-shape($bg-col, $txt-col, $type, $border, $height, $padding, $margin, $font-family, $font-size, $position) {
    @include ET-button-color($bg-col, $txt-col, $type);
    @include border-radius(map-get($button-map, size-radius));

    @if $type == 'fi-icon' {
        &.fi {
            font-size: map-get($button-map, font-size);
            height: map-get($button-map, font-size);
        }
    }

    @if $position != 'normal' and $position != 'after-module' {
        $height: map-get($button-map, height) - 6;
        $padding: map-get($button-map, size-ratio) (map-get($button-map, size-ratio) * 3);
    }

    @if $position == 'form' {
        $margin: (map-get($button-map, size-ratio) * 2) 0 0;
        width: auto;

    } @else if $position == 'input' {
        $height: map-get($button-map, height) + 2;
        border-top-left-radius: (map-get($button-map, size-ratio) * 0);
        border-bottom-left-radius: (map-get($button-map, size-ratio) * 0);

    }

    @if $position == 'after-module' or $position == 'content' {
        $margin: (map-get($button-map, size-ratio) * 4) auto (map-get($button-map, size-ratio) * 0);

    }

    @if $position == 'after-module' {
        $height: map-get($button-map, height) * 1.16;
        width: 100%;

    } @else if $position == 'content' {
        $height: map-get($button-map, height) * 0.6;
        width: 80%;
        line-height: $height;

    } @else if $position == 'center' {
        @include translateX(-50%);
        left: 50%;
        $margin: (map-get($button-map, size-ratio) * 4) auto;
    }

    height: $height;
    outline: none;
    padding: $padding;
    margin: $margin;
    border: $border;
    text-align: center;
    font: {
        family: $font-family;
        size: $font-size;
    };
}

@mixin ET-button-position($bg-col, $txt-col, $type, $border, $height, $padding, $margin, $font-family, $font-size, $position) {
    @include ET-button-shape($bg-col, $txt-col, $type, $border, $height, $padding, $margin, $font-family, $font-size, $position);

    @if $position == 'form' or $position == 'input' {
        @include translateX(-100%);
        position: relative;
    }

    @if $position == 'form' {
        left: 100%;

    } @else if $position == 'input' {
        left: calc(100% + 2px);
        top: -(map-get($button-map, height) + 2);
    }
}

@mixin ET-button-init(
    $bg-col: color(primary),
    $txt-col: color(default),
    $type: 'button',
    $border: map-get($button-map, border),
    $height: map-get($button-map, height),
    $padding: (map-get($button-map, size-ratio) * 2) (map-get($button-map, size-ratio) * 3),
    $margin: (map-get($button-map, size-ratio) * 0),
    $font-family: map-get($button-map, font-family-regular),
    $font-size: map-get($button-map, font-size),
    $position: 'normal'
) {
    @include ET-button-position($bg-col, $txt-col, $type, $border, $height, $padding, $margin, $font-family, $font-size, $position);
}

.btn-primary {
    @include ET-button-init;
}

SassMeister-output.css

.btn-primary {
  cursor: pointer;
  color: #fff;
  background-color: #f15a22;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
  height: 38px;
  outline: none;
  padding: 10px 15px;
  margin: 0px;
  border: 0 none;
  text-align: center;
  font-family: "Asap-regular";
  font-size: 18px;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #f47e52;
}

.btn-primary:active {
  background-color: #eb4a0f;
}