Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#contact" class="tbx-1145" aria-label="お問い合わせフォームへ"><span class="tbx-1145__env" aria-hidden="true"><span class="tbx-1145__flap"></span><span class="tbx-1145__letter">↗</span></span><span class="tbx-1145__copy"><small>GET IN TOUCH</small><strong>お問い合わせ</strong></span></a>CSS
.tbx-1145{box-sizing:border-box;display:flex;align-items:center;gap:18px;width:min(305px,100%);padding:20px 22px;background:#fff7ed;color:#463c30;border:1px solid #dabf9e;border-radius:13px;text-decoration:none;font-family:system-ui,sans-serif;transition:background .3s}
.tbx-1145__env{position:relative;display:block;width:78px;height:48px;flex:none;background:#cc785c;border:2px solid #a65742;border-radius:5px;box-shadow:0 5px 0 #e8c6ab;perspective:170px;isolation:isolate}
.tbx-1145__env:before{content:"";position:absolute;inset:0;background:linear-gradient(35deg,transparent 48%,#e9a184 49%,#e9a184 51%,transparent 52%),linear-gradient(-35deg,transparent 48%,#e9a184 49%,#e9a184 51%,transparent 52%);z-index:2;pointer-events:none}
.tbx-1145__flap{position:absolute;left:0;right:0;top:0;height:29px;background:#f5bd9b;clip-path:polygon(0 0,100% 0,50% 95%);transform-origin:top;transform:rotateX(0deg);transition:transform .52s cubic-bezier(.2,.8,.2,1);z-index:4}
.tbx-1145__letter{position:absolute;top:8px;left:24px;display:grid;place-items:center;width:30px;height:38px;background:#fefdfb;color:#a65742;border-radius:3px;font-size:23px;transition:transform .52s cubic-bezier(.2,.8,.2,1);z-index:1}
.tbx-1145__copy{display:grid;gap:5px}.tbx-1145 small{font-size:10px;letter-spacing:.13em;color:#995e45;font-weight:700}.tbx-1145 strong{font-size:18px;white-space:nowrap}
.tbx-1145:is(:hover,:focus-visible){background:#ffeee0}.tbx-1145:is(:hover,:focus-visible) .tbx-1145__flap{transform:rotateX(155deg)}.tbx-1145:is(:hover,:focus-visible) .tbx-1145__letter{transform:translateY(-20px)}
.tbx-1145:focus-visible{outline:3px solid #b05f46;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1145, .tbx-1145 *, .tbx-1145::before, .tbx-1145::after, .tbx-1145 *::before, .tbx-1145 *::after { animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Contact / CTA
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。