iT邦幫忙

2025 iThome 鐵人賽

0
自我挑戰組

給愛追劇的你:30天互動網站挑戰系列 第 23

Day 23:按鈕系統 & 微互動

  • 分享至 

  • xImage
  •  

目標:統一按鈕形狀、大小、狀態(hover/active/disabled)+ 微光澤。
檔案style.css
步驟

1. 整合 .btn.btn-warn.btn-clear 尺寸與圓角。

2. 新增「光帶」微動畫(已內建在 .fav,可抽成共用):

.btn::before{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transition:transform .6s ease;
}
.btn:hover::before{ transform:translateX(120%); }

3. 補上 :focus-visible 樣式,鍵盤操作更友善。

驗收:滑鼠滑過有細微亮帶、鍵盤 Tab 能清楚看到焦點。
進階:新增 .btn-pill(超圓角膠囊)、.btn-ghost(玻璃感)。


上一篇
Day 22:字體與排版階層
下一篇
Day 24:卡片層次 & 玻璃質感
系列文
給愛追劇的你:30天互動網站挑戰30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言