Generated by SassMeister.com.

SassMeister-input.scss

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

$text-color-primary: #fff;
$headings-font-family: Arial;

.btn {

     &.btn-primary,
     &.btn-secondary,
     &.btn-tertiary,
     &.btn-default,
     &.btn-info {
        position: relative;
        color: $text-color-primary;
        font-family: $headings-font-family;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
        border-radius: 10px;
        -webkit-font-smoothing: antialiased;
        transition: 
        0.09s ease box-shadow,
        0.09s ease transform;

        min-width: 120px;
        font-size: 16px;
        padding: 7px 24px 5px;

        &.btn-sm {
            min-width: 100px;
            font-size: 14px;
            padding: 4px 21px 1px;
            border-radius: 7px;
        }

        &.btn-lg {
            min-width: 150px;
            padding: 10px 30px 6px;
            font-size: 18px;
        }

        &:before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 0;
            transition: opacity .2s ease;
        }

          &:hover {
            &:before {
              opacity: 1;
            }
          }

          &:active {
            transform: translateY(3px);
          }

        }
        &.disabled {
            cursor: not-allowed;
            opacity: .6
        }

        &.btn-link {
            font-family: $headings-font-family;
            font-size: 16px;
            text-shadow: 0px 1px 1px rgba(255,255,255,.65);
            padding: 0;
        }

        &.btn-primary {
            box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.3),
          0 4px 0 #5F0F11;

            &:before {
                background: 
            radial-gradient(ellipse at 50% -100%,
            rgba(255, 255, 255,.4) 0%,
            rgba(255, 255, 255, 0) 70%);
            }

            &,
            &:hover,
            &:active,
            &:focus {
              border: 1px solid #a51f1f;
              background: 
                linear-gradient(to bottom, #ad2626, #890f0f);
            }

            &:active {
              box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
                0 1px 0 #5F0F11;
            }

        }

        &.btn-secondary {
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            0 4px 0 #344f40;

          &:before {
            background: 
              radial-gradient(ellipse at 50% -100%,
              rgba(255, 255, 255,.4) 0%,
              rgba(255, 255, 255, 0) 70%);
          }

          &,
          &:hover,
          &:active,
          &:focus {
            border: 1px solid #56886b;
            background: 
              linear-gradient(to bottom, #55876a, #477058);
          }

          &:active {
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
              0 1px 0 #344f40;
          }

        }

        &.btn-tertiary {
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            0 4px 0 #6d6c64;

          &:before {
            background: 
              radial-gradient(ellipse at 50% -100%,
              rgba(255, 255, 255,.4) 0%,
              rgba(255, 255, 255, 0) 70%);
          }

          &,
          &:hover,
          &:active,
          &:focus {
            border: 1px solid #a3a296;
            background: 
              linear-gradient(to bottom, #a3a295, #96968a);
          }

          &:active {
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
              0 1px 0 #6d6c64;
          }

        }

        &.btn-default {
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            0 4px 0 #6d6c64;

          &:before {
            background: 
              radial-gradient(ellipse at 50% -100%,
              rgba(255, 255, 255,.4) 0%,
              rgba(255, 255, 255, 0) 70%);
          }

          &,
          &:hover,
          &:active,
          &:focus {
            border: 1px solid #a3a296;
            background: 
              linear-gradient(top, #e3e6e4 0%, #c7c8c4 5%, #8e908d 100%);
          }

          &:active {
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
              0 1px 0 #6d6c64;
          }

        }

        &.btn-info {
            box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .3),
            0 1px 0 #d6d1cc;
            color: #56886b;
            text-shadow: 0 1px 0 #fff;

            &:before {
                background: 
                radial-gradient(ellipse at 50% -100%,
                rgba(255, 255, 255,.4) 0%,
                rgba(255, 255, 255, 0) 70%);
            }

            &,
            &:hover,
            &:active,
            &.active,
            &:focus {
                border: 1px solid #d4d4d4;
                background-color: #edeae6;
            }
            &:hover,
            &:active,
            &.active,
            &:focus {
                color: #49725A;
            }
            &.active {
                box-shadow: inset 0 1px 1px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.7);
                transform: translateY(1px);
            }
            &:active {
                box-shadow: inset 0 2px 1px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.7);
                transform: translateY(1px);
            }

            .fa {
                font-size: 13px;
                margin-right: 6px;
            }
            &.btn-lg {
                padding: 10px 30px 8px;

                .fa {
                    font-size: 15px;
                    margin-bottom: 2px;
                }
            }
            &.btn-sm {
                .fa {
                    font-size: 11px;
                }
            }

            &.btn-thinking {
                position: relative;

                > .content {
                    opacity: 0;
                    transform: translateY(80%);
                }
                > .loader {
                    opacity: 1;
                    transform: translateY(0%);
                }
            }

            &.btn-circular {
                border-radius: 50%;
                padding: 4px 6px 4px 8px;
                > i {
                    top: 0;
                    font-size: 16px;
                }
            }

            &.btn-lg {
                > .loader {
                    line-height: 37px;
                }
            }

            &[disabled] {
                opacity: 1;
            }

            /**
             * TODO: Shift these into separate "animation" classes to alter them as we please
             * Loaders
             */
            > .content,
            > .loader {
                display: block;
                transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }

            > .content {
                opacity: 1;
                transform: translateY(0%);
            }

            > .loader {
                position: absolute;
                opacity: 0;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                font-size: 17px;
                line-height: 27px;
                transform: translateY(-80%);

                &:before {
                    position: relative;
                    top: 1px;
                    display: inline-block;
                    font-family: 'FontAwesome';
                    font-style: normal;
                    font-weight: normal;
                    line-height: 1;
                    letter-spacing: 0;
                    vertical-align:top;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                    content: "\f021";
                    animation: spin 0.7s infinite linear;
                    vertical-align: middle !important;
                    text-shadow: none;
                }
            }
        }

}

SassMeister-output.css

.btn.btn-primary,
.btn.btn-secondary,
.btn.btn-tertiary,
.btn.btn-default,
.btn.btn-info {
  position: relative;
  color: #fff;
  font-family: Arial;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  -webkit-font-smoothing: antialiased;
  transition: 0.09s ease box-shadow, 0.09s ease transform;
  min-width: 120px;
  font-size: 16px;
  padding: 7px 24px 5px;
}

.btn.btn-primary.btn-sm,
.btn.btn-secondary.btn-sm,
.btn.btn-tertiary.btn-sm,
.btn.btn-default.btn-sm,
.btn.btn-info.btn-sm {
  min-width: 100px;
  font-size: 14px;
  padding: 4px 21px 1px;
  border-radius: 7px;
}

.btn.btn-primary.btn-lg,
.btn.btn-secondary.btn-lg,
.btn.btn-tertiary.btn-lg,
.btn.btn-default.btn-lg,
.btn.btn-info.btn-lg {
  min-width: 150px;
  padding: 10px 30px 6px;
  font-size: 18px;
}

.btn.btn-primary:before,
.btn.btn-secondary:before,
.btn.btn-tertiary:before,
.btn.btn-default:before,
.btn.btn-info:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.btn.btn-primary:hover:before,
.btn.btn-secondary:hover:before,
.btn.btn-tertiary:hover:before,
.btn.btn-default:hover:before,
.btn.btn-info:hover:before {
  opacity: 1;
}

.btn.btn-primary:active,
.btn.btn-secondary:active,
.btn.btn-tertiary:active,
.btn.btn-default:active,
.btn.btn-info:active {
  transform: translateY(3px);
}

.btn.disabled {
  cursor: not-allowed;
  opacity: .6;
}

.btn.btn-link {
  font-family: Arial;
  font-size: 16px;
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.65);
  padding: 0;
}

.btn.btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 0 #5F0F11;
}

.btn.btn-primary:before {
  background: radial-gradient(ellipse at 50% -100%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
}

.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus {
  border: 1px solid #a51f1f;
  background: linear-gradient(to bottom, #ad2626, #890f0f);
}

.btn.btn-primary:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 #5F0F11;
}

.btn.btn-secondary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 0 #344f40;
}

.btn.btn-secondary:before {
  background: radial-gradient(ellipse at 50% -100%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
}

.btn.btn-secondary,
.btn.btn-secondary:hover,
.btn.btn-secondary:active,
.btn.btn-secondary:focus {
  border: 1px solid #56886b;
  background: linear-gradient(to bottom, #55876a, #477058);
}

.btn.btn-secondary:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 #344f40;
}

.btn.btn-tertiary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 0 #6d6c64;
}

.btn.btn-tertiary:before {
  background: radial-gradient(ellipse at 50% -100%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
}

.btn.btn-tertiary,
.btn.btn-tertiary:hover,
.btn.btn-tertiary:active,
.btn.btn-tertiary:focus {
  border: 1px solid #a3a296;
  background: linear-gradient(to bottom, #a3a295, #96968a);
}

.btn.btn-tertiary:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 #6d6c64;
}

.btn.btn-default {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 0 #6d6c64;
}

.btn.btn-default:before {
  background: radial-gradient(ellipse at 50% -100%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
}

.btn.btn-default,
.btn.btn-default:hover,
.btn.btn-default:active,
.btn.btn-default:focus {
  border: 1px solid #a3a296;
  background: linear-gradient(top, #e3e6e4 0%, #c7c8c4 5%, #8e908d 100%);
}

.btn.btn-default:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 #6d6c64;
}

.btn.btn-info {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 #d6d1cc;
  color: #56886b;
  text-shadow: 0 1px 0 #fff;
  /**
             * TODO: Shift these into separate "animation" classes to alter them as we please
             * Loaders
             */
}

.btn.btn-info:before {
  background: radial-gradient(ellipse at 50% -100%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
}

.btn.btn-info,
.btn.btn-info:hover,
.btn.btn-info:active,
.btn.btn-info.active,
.btn.btn-info:focus {
  border: 1px solid #d4d4d4;
  background-color: #edeae6;
}

.btn.btn-info:hover,
.btn.btn-info:active,
.btn.btn-info.active,
.btn.btn-info:focus {
  color: #49725A;
}

.btn.btn-info.active {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.7);
  transform: translateY(1px);
}

.btn.btn-info:active {
  box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.7);
  transform: translateY(1px);
}

.btn.btn-info .fa {
  font-size: 13px;
  margin-right: 6px;
}

.btn.btn-info.btn-lg {
  padding: 10px 30px 8px;
}

.btn.btn-info.btn-lg .fa {
  font-size: 15px;
  margin-bottom: 2px;
}

.btn.btn-info.btn-sm .fa {
  font-size: 11px;
}

.btn.btn-info.btn-thinking {
  position: relative;
}

.btn.btn-info.btn-thinking > .content {
  opacity: 0;
  transform: translateY(80%);
}

.btn.btn-info.btn-thinking > .loader {
  opacity: 1;
  transform: translateY(0%);
}

.btn.btn-info.btn-circular {
  border-radius: 50%;
  padding: 4px 6px 4px 8px;
}

.btn.btn-info.btn-circular > i {
  top: 0;
  font-size: 16px;
}

.btn.btn-info.btn-lg > .loader {
  line-height: 37px;
}

.btn.btn-info[disabled] {
  opacity: 1;
}

.btn.btn-info > .content,
.btn.btn-info > .loader {
  display: block;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn.btn-info > .content {
  opacity: 1;
  transform: translateY(0%);
}

.btn.btn-info > .loader {
  position: absolute;
  opacity: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 17px;
  line-height: 27px;
  transform: translateY(-80%);
}

.btn.btn-info > .loader:before {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: top;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f021";
  animation: spin 0.7s infinite linear;
  vertical-align: middle !important;
  text-shadow: none;
}