SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----

// Copied and Pasted from Harry Roberts Beutons - 
// http://github.com/csswizardry/beautons/blob/master/beautons.css


// Base
.btn {
  background-color:#2c77ba;
  border:none;
  border-radius:4px;
  color:#fff;
  cursor:pointer;
  display:inline-block;
  font-family:inherit;
  font-size:100%;
  height: 3em;
  line-height:3;
  margin:0;
  overflow:visible;
  padding-bottom:0;
  padding-left: 1em;
  padding-right:1em;
  padding-top: 0;
  text-decoration:none;
  vertical-align:middle;
  white-space:nowrap;
    &:hover,
    &:active,
    &:focus,
    &:visited{
        text-decoration:none;
        color:#fff;
    }

    &: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
.btn {
    &--small{
      height: 2em;
      line-height:2;
      padding-left: 0.5em;
      padding-right:0.5em;


    }
    &--large{
      height: 4em;
      line-height:4;
      padding-left: 1.5em;
      padding-right:1.5em;
;
    }
    &--huge{
      height: 5em;
      line-height:5;
      padding-left: 2em;
      padding-right:2em;      
    }  
}
.btn {
  &--full{
    width:100%;
    padding-right:0;
    padding-left: 0;
    text-align:center;
  }
}

// font-sizes

.btn {
  &--alpha{
    font-size:3rem;
  }
  &--beta{
    font-size:2rem;
  }
  &--gamma{
    font-size:1rem;
  }
}

// buttton inherits sizes
.btn {
  &--natural{
    font-size:inherit;
    height:auto;
    line-height:inherit;    
    padding-right:0.5em;
    padding-left: 0.5em;
    vertical-align:baseline;    
  }
}


// functions

.btn {
  &--primary{}
  &--secondary{}
  &--tertiary{}
}

.btn {
  &--inactive,
    &:hover,
    &:active,
    &:focus{
        background-color:#ddd;
        box-shadow:none;
        color:#777;
        cursor:default;
    }
}
// styles
.btn {
  &--soft{
    border-radius:5em;
  }
  &--hard{
    border-radius:0;
  }
}

SassMeister-output.css

.btn {
  background-color: #2c77ba;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 100%;
  height: 3em;
  line-height: 3;
  margin: 0;
  overflow: visible;
  padding-bottom: 0;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}
.btn:hover, .btn:active, .btn:focus, .btn:visited {
  text-decoration: none;
  color: #fff;
}
.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;
}

.btn--small {
  height: 2em;
  line-height: 2;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.btn--large {
  height: 4em;
  line-height: 4;
  padding-left: 1.5em;
  padding-right: 1.5em;
}
.btn--huge {
  height: 5em;
  line-height: 5;
  padding-left: 2em;
  padding-right: 2em;
}

.btn--full {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  text-align: center;
}

.btn--alpha {
  font-size: 3rem;
}
.btn--beta {
  font-size: 2rem;
}
.btn--gamma {
  font-size: 1rem;
}

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

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

.btn--soft {
  border-radius: 5em;
}
.btn--hard {
  border-radius: 0;
}