React 按鈕與開關元件

磁吸按鈕、長按確認、載入狀態、主題切換、分段控制。按鈕是互動密度最高的元件,微互動的價值在這裡最明顯——也最容易做到讓人不耐煩。

共 18 個,其中 18 個免費、不需登入即可安裝。

  • 游標磁吸位移按鈕

  • View Transitions 圓形擴散明暗切換

  • 播放/暫停圖形 morph 按鈕

  • 長按填充確認按鈕(危險操作)

  • 液態黏滯效果按鈕(SVG filter)

  • 可拖曳並回彈吸附的按鈕

  • idle→loading→success/error 狀態機按鈕

  • 光沿按鈕周邊流動的微光按鈕

  • 點擊擴散漣漪的按鈕

  • 彩虹漸層流動動畫按鈕

  • 邊框繞行發光的凸顯按鈕

  • hover 時液面自底部帶波浪漲滿按鈕,文字反色

  • 拖曳滑塊到底才觸發的確認控制,防誤觸

  • 選中底塊以 spring 流動變形至新選項的分段控制

  • 聲音開關:開啟時等化器條跳動、關閉凍結灰階

  • 兩層結構的實體按鍵:面板浮在底座上,滑過微沉 2px、按下沉到底,實心色塊做出深度,不靠陰影模糊。

  • Switch免費

    以彈簧位移的開關:thumb 可直接拖曳切換,可在 thumb 內放 icon 交叉淡接,另有壓下態的切換鈕變體。

  • 兩態文字開關(例如「詢問|自動」),玻璃質感把手以彈簧滑動,文字隨把手位置交叉淡接,適合切換助理或系統的運作模式。