今天想要分享一些按鈕被 hover 時的效果，
我的參考來源來自以下兩個 Youtube 頻道：
Online Tutorials
DarkCode

本篇關鍵字

• :hover
• ::before、::after、position: absolute
• transition
• z-index

範例檔

HTML

<a class="btn btn1" href="#">Button</a>
<a class="btn btn2" href="#">Button</a>
<a class="btn btn3" href="#">Button</a>
<a class="btn btn4" href="#">Button</a>

CSS

body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* btn 共用樣式 */
.btn{
  display: inline-block;
  text-decoration: none;
  padding: 10px 15px;
  color: #008891;
  position: relative;
  overflow: hidden;
  margin: 0 10px;
}

/* btn1 */
.btn1{
  border: 1px solid #008891;
}

.btn1:hover{
  color: #fff;
}

.btn1::before{
  content:'';
  position: absolute;
  width: 100%;
  height: 0%;
  background-color: #008891;
  left: 0;
  top: 0;
  border-radius: 0 0 50% 50%;
  z-index: -1;
  transition: .5s;
}

.btn1:hover:before{
  height: 180%;
}

/* btn2 */
.btn2{
  transition: color .8s .2s;
}

.btn2:hover{
  color: #fff;
}

.btn2::before{
  content:'';
  position: absolute;
  left: 0;
  bottom: 0;
  top: 95%;
  width: 100%;
  background-color: #008891;
  transition: 1s;
  z-index: -1;
}

.btn2:hover:before{
  top: 0;
}

/* btn3 */
.btn3:hover{
  color: #fff;
  background-color: #008891;
  transition: .3s .8s;
}

.btn3::before,
.btn3::after{
  content:'';
  position: absolute;
  width: 10%;
  height: 20%;
  border-color: #008891;
  border-style: solid;
  transition: 1s;
}

.btn3::before{
  top: 0;
  left: 0;
  border-width: 1px 0 0 1px;
}

.btn3::after{
  bottom: 0;
  right: 0;
  border-width: 0 1px 1px 0;
}

.btn3:hover::before,
.btn3:hover::after{
  width: 100%;
  height: 100%;
}

/* btn4 */
.btn4::before{
  content:'';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #008891;
  z-index: -2;
}

.btn4:hover{
  color: #008891;
}

.btn4::after{
  content:'';
  position: absolute;
  width: 10px;
  height: 100px;
  background-color: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: -1;
  transition: .5s;
}

.btn4:hover::after{
  transform: translate(-50%, -50%) rotate(45deg);
}

喪屍分解

• 請原諒我偷懶使用了 btn1 - btn4 這樣的命名
• ::before、::after 真的是非常非常好用的東西，這四個按鈕都有用到它們，搭配 position: absolute 的用法更是超常出現
• 搭配 transition 就可以製造出各種效果
• z-index 的應用，要讓東西有前後之分，否則 ::before 或是 ::after 會蓋到字

大概就是這樣的一些小範例，
當然還有其他百百種 hover 的動畫，
沒事翻翻網路學個幾招也是滿好玩的啦～
大家中秋節快樂啊！

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的是圖文互動卡片。