Live Demo
対象要素をマウスでホバー、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1287" type="button" aria-label="ターゲットを選択"><span class="tbx-1287__corner tbx-1287__tl"></span><span class="tbx-1287__corner tbx-1287__tr"></span><span class="tbx-1287__corner tbx-1287__bl"></span><span class="tbx-1287__corner tbx-1287__br"></span><span class="tbx-1287__dot"></span><small>SELECT</small></button>
CSS
.tbx-1287{box-sizing:border-box;display:grid;place-items:center;position:relative;width:115px;height:115px;border:none;border-radius:15px;background:#172c36;color:#e5f5ed;cursor:pointer;overflow:hidden;transition:background .35s}
.tbx-1287__corner{position:absolute;width:20px;height:20px;border:2px solid #8de2c7;transition:inset .4s,transform .4s}
.tbx-1287__tl{top:15px;left:15px;border-right:none;border-bottom:none}.tbx-1287__tr{top:15px;right:15px;border-left:none;border-bottom:none}.tbx-1287__bl{bottom:15px;left:15px;border-right:none;border-top:none}.tbx-1287__br{bottom:15px;right:15px;border-left:none;border-top:none}
.tbx-1287__dot{position:absolute;width:9px;height:9px;background:#f8bf83;border-radius:50%;transition:transform .4s}
.tbx-1287 small{position:absolute;bottom:9px;font:700 9px/1 system-ui,sans-serif;letter-spacing:.1em;color:#e1eeda}
.tbx-1287:hover,.tbx-1287:focus-visible{background:#204451}.tbx-1287:hover .tbx-1287__tl,.tbx-1287:focus-visible .tbx-1287__tl{top:30px;left:30px}.tbx-1287:hover .tbx-1287__tr,.tbx-1287:focus-visible .tbx-1287__tr{top:30px;right:30px}.tbx-1287:hover .tbx-1287__bl,.tbx-1287:focus-visible .tbx-1287__bl{bottom:30px;left:30px}.tbx-1287:hover .tbx-1287__br,.tbx-1287:focus-visible .tbx-1287__br{bottom:30px;right:30px}
.tbx-1287:hover .tbx-1287__dot,.tbx-1287:focus-visible .tbx-1287__dot{transform:scale(1.8)}.tbx-1287:focus-visible{outline:3px solid #8de2c7;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tbx-1287,.tbx-1287__corner,.tbx-1287__dot{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
UI / Dashboard
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバーと同じ結果にならないため、タップ・フォーカス時の動作も確認してください。
Browser：現行Chrome / Firefox / Edge / SafariのCSS機能を利用します。
Reduced Motion：prefers-reduced-motion: reduce でアニメーションを停止します。