A Sass version of my '.super-clickable-button' gist: https://gist.github.com/manikrathee/1b1f98577d93844fd5fa

super-clickable-button-scss

@mixin super-clickable-button($color){
  display: block;
  background: $color;
  background-image: linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);
    background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);
    background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);
    background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);
    background-image: -ms-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);
    background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0, rgba(0,0,0,0.1)),
      color-stop(1, rgba(255,255,255,0.1))
    );
  cursor: pointer;
  outline: none;
  padding: 5px 10px;
  color: $white;
  font-weight: 700;
  text-shadow: 0 1px 0 darken($color, 10%);
  border: 1px solid darken($color, 2%);
  border-radius: 4px;
  box-shadow: inset 0px 1px 1px 1px rgba(255, 255, 255, 0.2),
            0px 1px 1px 1px darken($color, 25%);
            /* 0px 1px 1px 1px rgba(25, 84, 114, 1); */
  @include transition( (background 0.05s ease-in-out),(box-shadow 0.05s ease-in-out),(color 0.05s ease-in-out) );
  &:hover{
    background: $color;
    color: $white;
  }
  &:active{
    background: darken($color, 10%);
    box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, 0.3);
    color: darekn($white, 10%);
  }
}