Choice Tile Hover Path

Live Demo

マウスを乗せるか、Tabキーでフォーカスして動きを確認してください。

Source Code

必要なコードをコピーして実装に利用できます。

<fieldset class="tbx-1204"><legend>希望する連絡方法</legend><label class="tbx-1204__choice"><input type="radio" name="tbx-1204-method" value="mail" checked><span class="tbx-1204__ring" aria-hidden="true"></span><b>メール</b><small>MAIL</small></label><label class="tbx-1204__choice"><input type="radio" name="tbx-1204-method" value="phone"><span class="tbx-1204__ring" aria-hidden="true"></span><b>お電話</b><small>PHONE</small></label></fieldset>

.tbx-1204{box-sizing:border-box;display:grid;gap:9px;width:263px;max-width:100%;border:0;margin:0;padding:10px 0;font-family:system-ui;color:#253b47}.tbx-1204 legend{font-size:12px;font-weight:750;margin-bottom:4px}.tbx-1204__choice{position:relative;display:flex;align-items:center;gap:10px;cursor:pointer;border:1px solid #d5e1e5;border-radius:7px;background:#fff;padding:12px 13px;overflow:hidden;transition:border-color .3s,background .3s}.tbx-1204__choice::before{content:"";position:absolute;inset:0;border:2px solid #388b8c;transform:scaleX(0);transform-origin:left;transition:transform .33s;pointer-events:none;border-radius:6px}.tbx-1204__choice input{position:absolute;left:10px;top:10px;opacity:0;width:20px;height:20px}.tbx-1204__ring{width:16px;height:16px;flex:none;border:2px solid #7c969e;border-radius:50%;box-sizing:border-box;transition:border-color .25s;display:grid;place-items:center}.tbx-1204__ring::after{content:"";width:7px;height:7px;border-radius:50%;background:#338a85;transform:scale(0);transition:transform .25s}.tbx-1204__choice b{font-size:13px}.tbx-1204__choice small{margin-left:auto;letter-spacing:.14em;color:#8a9ca6;font-size:9px}.tbx-1204__choice:is(:hover,:focus-within){background:#f4fbf9;border-color:#388b8c}.tbx-1204__choice:is(:hover,:focus-within)::before{transform:scaleX(1)}.tbx-1204__choice:has(input:checked){border-color:#338a85;background:#f5fbf8}.tbx-1204__choice:has(input:checked) .tbx-1204__ring{border-color:#338a85}.tbx-1204__choice:has(input:checked) .tbx-1204__ring::after{transform:scale(1)}.tbx-1204__choice:focus-within{outline:2px solid #338a85;outline-offset:2px}
@media (prefers-reduced-motion: reduce) {.tbx-1204,.tbx-1204 *,.tbx-1204::before,.tbx-1204::after,.tbx-1204 *::before,.tbx-1204 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}

How to Use

HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。

Use Case

Form / Selection

Technical Notes

ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。

Mobile：タッチ端末で重要情報をホバー時にだけ隠さない設計にしてください。

Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。:has()およびclip-path等は対応ブラウザを確認。

Reduced Motion：prefers-reduced-motion: reduce 対応。