Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#pricing" class="tbx-1158"><span class="tbx-1158__main"><span class="tbx-1158__tiny">START YOUR PLAN</span><strong>Choose a plan</strong></span><span class="tbx-1158__cut" aria-hidden="true">→</span><span class="tbx-1158__ribbon" aria-hidden="true">from $19</span></a>
CSS
.tbx-1158{box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:space-between;width:264px;max-width:100%;min-height:72px;padding:15px 18px;border:1px solid #d6c9a4;border-radius:10px;background:#fffdf4;color:#403421;text-decoration:none;font:13px/1.25 system-ui,sans-serif;box-shadow:0 4px 0 #e6dec9;isolation:isolate;transition:transform .28s,box-shadow .28s}
.tbx-1158__main{display:flex;flex-direction:column;gap:5px}.tbx-1158__tiny{font-size:9px;letter-spacing:.16em;font-weight:800;color:#9b7950}.tbx-1158 strong{font:750 17px/1.1 system-ui,sans-serif}.tbx-1158__cut{display:grid;place-items:center;height:33px;width:33px;border-radius:50%;color:#fff;background:#54412b;font-size:19px;transition:transform .35s}.tbx-1158__ribbon{position:absolute;right:17px;top:-17px;display:block;background:#d05438;color:#fff;font-size:10px;font-weight:800;padding:6px 11px 7px;clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);transform:translateY(15px) rotate(6deg) scale(.75);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s}
.tbx-1158:is(:hover,:focus-visible){transform:translateY(-5px);box-shadow:0 9px 15px #5d482c21}.tbx-1158:is(:hover,:focus-visible) .tbx-1158__ribbon{opacity:1;transform:translateY(0) rotate(6deg) scale(1)}.tbx-1158:is(:hover,:focus-visible) .tbx-1158__cut{transform:translateX(3px)}.tbx-1158:focus-visible{outline:2px solid #d05438;outline-offset:4px}
@media (prefers-reduced-motion: reduce) {.tbx-1158, .tbx-1158 *, .tbx-1158::before, .tbx-1158::after, .tbx-1158 *::before, .tbx-1158 *::after {animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Pricing / CTA
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても操作・情報取得ができるようにしてください。
Browser：最近のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。