Generated by SassMeister.com.

SassMeister-input-HTML.html

<a class="button" href="javascript: void(0)">Button</a>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

body {
  font-family: 'Helvetica Neue', sans-serif;
}

$pink: #f62f62;
$white: #ffffff;

.button {
  background: $pink;
  color: $white;
  display: inline-block;
  font-weight: 500;
  padding: .75em 1.5em;
  text-decoration: none;
  
  &:hover {
    background: lighten($pink, 10%);
  }
  
  &:active {
    background: darken($pink, 10%);
  }
}

SassMeister-output.css

body {
  font-family: 'Helvetica Neue', sans-serif;
}

.button {
  background: #f62f62;
  color: white;
  display: inline-block;
  font-weight: 500;
  padding: .75em 1.5em;
  text-decoration: none;
}
.button:hover {
  background: #f86087;
}
.button:active {
  background: #e80a43;
}

SassMeister-rendered.html

<a class="button" href="javascript: void(0)">Button</a>