Live Demo
マウスを乗せるか、Tabキーでフォーカスして動きを確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1203" type="button" aria-label="リンクをコピーする（演出サンプル）"><svg viewBox="0 0 100 100" aria-hidden="true"><rect class="tbx-1203__left" x="12" y="35" width="46" height="25" rx="12.5" fill="none" stroke="currentColor" stroke-width="7" transform="rotate(-31 35 48)"/><rect class="tbx-1203__right" x="42" y="35" width="46" height="25" rx="12.5" fill="none" stroke="currentColor" stroke-width="7" transform="rotate(-31 65 48)"/></svg><span>LINK</span></button>
CSS
.tbx-1203{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:108px;height:122px;padding:8px;border:1px solid #d0dfe7;background:white;border-radius:17px;cursor:pointer;color:#2e7489;box-shadow:0 8px 18px #0d35441d;transition:background .35s,color .35s}.tbx-1203 svg{width:84px;height:84px;overflow:visible}.tbx-1203 rect{transition:transform .43s cubic-bezier(.2,.8,.2,1)}.tbx-1203__left{transform-origin:35px 48px}.tbx-1203__right{transform-origin:65px 48px}.tbx-1203 span{font:800 10px system-ui;letter-spacing:.17em}.tbx-1203:is(:hover,:focus-visible){background:#2e7489;color:#fff}.tbx-1203:is(:hover,:focus-visible) .tbx-1203__left{transform:translate(9px,0) rotate(-6deg)}.tbx-1203:is(:hover,:focus-visible) .tbx-1203__right{transform:translate(-9px,0) rotate(-6deg)}.tbx-1203:focus-visible{outline:3px solid #f1b55d;outline-offset:3px}
@media (prefers-reduced-motion: reduce) {.tbx-1203,.tbx-1203 *,.tbx-1203::before,.tbx-1203::after,.tbx-1203 *::before,.tbx-1203 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Link / Share
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバー時にだけ隠さない設計にしてください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。:has()およびclip-path等は対応ブラウザを確認。
Reduced Motion：prefers-reduced-motion: reduce 対応。