這次要來寫的是按紐填色的效果
一樣把基本架構寫好

<div class="centered">
  <a class="btn">Hover Me!!</a>
</div>

然後設定 css
這次的話有點難單獨做說明，所以我直接把註解直接打在 css 內

*{
  font-family:arial;
}

.centered{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.btn{
  color:#262626;
  padding:0.5em 1em;
  border:#ff4141 2px solid;
  font-size:1.5em;
  cursor:pointer;
  border-radius:4px;
  /*使用漸層背景色+用文字做遮罩形狀，讓背景可以透出字*/
  background:linear-gradient(45deg,#fff 50%,#ff4141 50%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  position:relative;
}

.btn:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(45deg,#ff4141 50%,transparent 50%);
  z-index:-1;
}

最後來設定背景色 transition 的時間跟位置

/*把背景調大 塞滿整個區塊*/
.btn,.btn:after{
  background-size:300%;
  background-position:100%;
  transition:1s;
}
/*滑鼠滑入時改變背景位置+讓字變大一些些*/
.btn:hover,.btn:hover:after{
  background-position:0;
  font-size:1.6em;
}

到這邊就完成了
一樣附上本次的 codepen 如下
https://codepen.io/UHU/pen/gBJKdm