CSS Flip Switch 產生器

這個 CSS Flip Switch 產生器可以用純 CSS 建立有動畫的 toggle switch。你可以自訂 track、thumb、文字標籤、顏色、邊框、轉場效果與預設樣式,並即時預覽開關狀態,最後複製產生的 HTML 與 CSS。

自訂設定

Animation

ms

Track Configuration

px
px
px
px

Thumb Configuration

px
px
%
px

Labels

px
px

預覽

{{ isChecked ? labelActive : labelInactive }}