Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1143" href="#message"><span class="tbx-1143__canvas" aria-hidden="true"><svg viewBox="0 0 146 66" width="146" height="66" role="img"><path class="tbx-1143__trace" d="M12 52 Q 58 8 131 22" fill="none" stroke="#a8cfd5" stroke-width="2" stroke-dasharray="5 7"/><path class="tbx-1143__plane" d="M0 0 L25 -7 L15 13 L10 5 L0 0 Z M10 5 L25 -7" fill="#f1b677" stroke="#a56542" stroke-width="1.3" stroke-linejoin="round"/></svg></span><span class="tbx-1143__label"><small>SEND A MESSAGE</small><strong>お問い合わせ ↗</strong></span></a>CSS
.tbx-1143{box-sizing:border-box;display:block;width:min(306px,100%);height:196px;position:relative;overflow:hidden;background:#1e4b61;color:#fff;border-radius:11px;font-family:system-ui,sans-serif;text-decoration:none}
.tbx-1143__canvas{display:grid;place-items:center;height:124px}.tbx-1143__canvas svg{overflow:visible;max-width:100%}.tbx-1143__plane{transform:translate(5px,47px) rotate(-25deg);transform-box:fill-box;transform-origin:center;transition:transform .72s cubic-bezier(.22,.7,.15,1)}
.tbx-1143__trace{stroke-dasharray:0 300;transition:stroke-dasharray .72s}
.tbx-1143__label{position:absolute;left:18px;right:18px;bottom:15px;display:grid;gap:7px;padding-top:10px;border-top:1px solid #82aabb}.tbx-1143 small{font-size:9px;color:#a8cfd5;font-weight:800;letter-spacing:.13em}.tbx-1143 strong{font-size:16px}
.tbx-1143:is(:hover,:focus-visible) .tbx-1143__plane{transform:translate(125px,12px) rotate(22deg)}.tbx-1143:is(:hover,:focus-visible) .tbx-1143__trace{stroke-dasharray:5 7}
.tbx-1143:focus-visible{outline:3px solid #f1b677;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1143, .tbx-1143 *, .tbx-1143::before, .tbx-1143::after, .tbx-1143 *::before, .tbx-1143 *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Contact / CTA
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。