透過 SCSS 建立圓型按鈕，鼠標在上面時有漸進漸出效果

有點時間看到透過CSS 來建立圓型按鈕，並能在 hover Event 時產生漸進漸出效果，滿簡單的就放到上面給初學朋友們 參考參考 (大神級的就請多指教)

HTML:
<div class="center">
  <a href="#">
    <div class='button'>
      <div class="button_outline"></div>
    <div class="button_background">    </div>
      BUTTON
    </div>
  </a>
</div>

CSS:
$color_blue:#3C474B;
$color_gray:#AEB5B7;
$color_white:#ffffff;

$transition:2s cubic-bezier(1,0.5, 0.7,1);

@mixin center{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

*{
  box-sizing:border-box;
}

a{
  text-decoration:none;
}

.center{
  @include center;
}

.button{
  position:relative;
  width:200px;
  height:200px;
  line-height:200px;
  text-align:center;
  font-family:helvetica;
  font-weight:bold;
  font-size:1.5em;
  letter-spacing:0.2em;
  color:red;
  transition:$transition;
}

.button_background{
  position:absolute;
  width:100%;
  height:100%;
  background: $color_blue;
  border:2px solid $color_blue;
  border-radius:50%;
  transform-origin: 50% 50%;
  transform:scale(0);
  transition:$transition;
  opacity:0;
  z-index:-1;
}

.button_outline{
  position:absolute;
  width:100%;
  height:100%;
  border:2px solid $color_blue;
  border-radius:50%;
  transform-origin:50% 50%;
  transform:scale(1);
  transition:$transition;
}

.button:hover{
  color: $color_white;
 
  .button_background{
    transform:scale(0.8);
    opacity:1;
  }
 
  .button_outline{
    transform:scale(0.8);
    opacity:1;
  }
}