Generated by SassMeister.com.

SassMeister-input-HTML.html

<a href="#" class="btn">Don't Click Me</a>

SassMeister-input.scss

// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// ----

/* @include hover-switch(black, hotpink) */

@mixin hover-switch($color-a, $color-b) {
  
  //@include transition(all, 0.4s, linear);
  transition: background-color, 0.4s, linear, color, 0.4s, linear;
  
  background-color: $color-a;
  color: $color-b;
  
  
  &:hover,
  &:focus {
    
    background-color: $color-b;
    color: $color-a;
    
  }
  
}

.btn {
      @include hover-switch(black, hotpink);
      
      display: inline-block;
      vertical-align: middle;
      white-space: nowrap;
      font-family: inherit;        
      font-size: 100%;
      cursor: pointer;
      border: none;
      margin: 0;
      padding-top:   0;
      padding-bottom:0;
      line-height: 3;
      padding-right: 1em;
      padding-left:  1em;

  }

  .btn {

      &,
      &:hover {
          text-decoration: none;
      }

      &:active,
      &:focus {
          outline: none;
      }

  }
  
  
  

SassMeister-output.css

/* @include hover-switch(black, hotpink) */
.btn {
  transition: background-color, 0.4s, linear, color, 0.4s, linear;
  background-color: black;
  color: hotpink;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  font-family: inherit;
  font-size: 100%;
  cursor: pointer;
  border: none;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 3;
  padding-right: 1em;
  padding-left: 1em;
}
.btn:hover, .btn:focus {
  background-color: hotpink;
  color: black;
}

.btn, .btn:hover {
  text-decoration: none;
}
.btn:active, .btn:focus {
  outline: none;
}

SassMeister-rendered.html

<a href="#" class="btn">Don't Click Me</a>