跳到主要內容

按鈕描邊生長

滑鼠移入觸發

懸浮時描邊從中心放大浮現,適合次級主行動按鈕。

把滑鼠移到方塊上
這一條靠 :hover 觸發,頁麵載入時不會自己播。滑鼠移上去、再移開就能來回看。
參數調節
交互類動畫由滑鼠狀態驅動,時長與緩動寫在規則裡的 transition / animation 上,改成下方代碼裡的數值即可。
完整代碼
/* 按鈕描邊生長 */
.anim-btn-border-draw {
  position: relative;
}
.anim-btn-border-draw::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #93c5fd;
  border-radius: inherit;
  transform: scale(.8);
  opacity: 0;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  pointer-events: none;
}
.anim-btn-border-draw:hover::before {
  transform: scale(1.16);
  opacity: 1;
}