<a href="#" class="button">
  <span><span>My Button</span></span>  
</a>

<a href="#" class="button button--secondary">
  <span><span>My Button</span></span>  
</a>

$color-primary: #f09;
$color-secondary: #f90;
$border: 3px;
$font-size: 20px;
$height: $font-size * 3;

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  padding: 2em;
}

.button {
  font-size: $font-size;
  text-decoration: none;
  font-weight: bold;
  color: #fff;
  display: inline-flex;
  position: relative;
  padding: 0 2em;
  background-image: linear-gradient(
    90deg,
    $color-primary 0%,
    $color-secondary 50%
  );
  height: $height;
  border-radius: $height/2;
  align-items: center;
  text-transform: uppercase;
  background-size: 200% 100%;
  transition: background-position 0.2s ease-out;
  background-position: 0 0;

  &:hover {
    color: #fff;
    //background: $color-primary;
    background-position: 100% 0;
  }

  &--secondary {
    &:before {
      content: "";
      position: absolute;
      left: $border;
      top: $border;
      right: $border;
      bottom: $border;
      background: #fff;
      border-radius: $height/2;
      transition: background 0.2s ease-out;
    }

    > span {
      position: relative;
      z-index: 2;
      background: linear-gradient(to right, $color-primary, $color-secondary);
      background-clip: border-box;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    &:hover {
      background: linear-gradient(to right, $color-primary, $color-secondary);
      > span {
        -webkit-text-fill-color: #fff;
      }

      &:before {
        background: rgba(255, 255, 255, 0);
      }
    }
  }
}