Generated by SassMeister.com.

SassMeister-input.sass

// ----
// Sass (v3.2.19)
// Compass (v0.12.7)
// ----

@mixin button-base($border-color, $text-color, $bg-color: transparent)
  background-color: $bg-color
  border: 2px solid $border-color
  color: $text-color
  svg
    fill: $text-color

@mixin button-hover($base-color, $text-color, $has-bg: false)
  &:hover, .uploader.hover &
    border-color: $base-color
    color: $text-color
    @if $has-bg
      background-color: $base-color
    svg
      fill: $text-color

@mixin square($width)
  &.square
    padding: 0
    width: $width

@mixin build-buttons($padding: 15px, $font-size: 14px, $square-size: 40px)
  position: relative
  vertical-align: baseline
  display: inline-block
  height: 40px
  margin: 0 10px 0 0
  padding: 0 $padding
  font: bold $font-size/36px 'gotham'
  cursor: pointer
  text-decoration: none
  white-space: nowrap
  outline: none
  text-align: center
  +square($square-size)
  +button-base(green, green)
  +button-hover(darken(green, 15%), darken(green, 15%))
  &:last-child
    margin-right: 0

.test-button.alt
  +build-buttons

button, .button, input[type="submit"], input[type="button"], input[type="reset"]
  +build-buttons($padding: 40px, $font-size: 15px, $square-size: 50px)

SassMeister-output.css

.test-button.alt {
  position: relative;
  vertical-align: baseline;
  display: inline-block;
  height: 40px;
  margin: 0 10px 0 0;
  padding: 0 15px;
  font: bold 0.38889 "gotham";
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  outline: none;
  text-align: center;
  background-color: transparent;
  border: 2px solid green;
  color: green;
}
.test-button.alt.square {
  padding: 0;
  width: 40px;
}
.test-button.alt svg {
  fill: green;
}
.test-button.alt:hover, .uploader.hover .test-button.alt {
  border-color: #003400;
  color: #003400;
}
.test-button.alt:hover svg, .uploader.hover .test-button.alt svg {
  fill: #003400;
}
.test-button.alt:last-child {
  margin-right: 0;
}

button, .button, input[type="submit"], input[type="button"], input[type="reset"] {
  position: relative;
  vertical-align: baseline;
  display: inline-block;
  height: 40px;
  margin: 0 10px 0 0;
  padding: 0 40px;
  font: bold 0.41667 "gotham";
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  outline: none;
  text-align: center;
  background-color: transparent;
  border: 2px solid green;
  color: green;
}
button.square, .button.square, input[type="submit"].square, input[type="button"].square, input[type="reset"].square {
  padding: 0;
  width: 50px;
}
button svg, .button svg, input[type="submit"] svg, input[type="button"] svg, input[type="reset"] svg {
  fill: green;
}
button:hover, .uploader.hover button, .button:hover, .uploader.hover .button, input[type="submit"]:hover, .uploader.hover input[type="submit"], input[type="button"]:hover, .uploader.hover input[type="button"], input[type="reset"]:hover, .uploader.hover input[type="reset"] {
  border-color: #003400;
  color: #003400;
}
button:hover svg, .uploader.hover button svg, .button:hover svg, .uploader.hover .button svg, input[type="submit"]:hover svg, .uploader.hover input[type="submit"] svg, input[type="button"]:hover svg, .uploader.hover input[type="button"] svg, input[type="reset"]:hover svg, .uploader.hover input[type="reset"] svg {
  fill: #003400;
}
button:last-child, .button:last-child, input[type="submit"]:last-child, input[type="button"]:last-child, input[type="reset"]:last-child {
  margin-right: 0;
}