Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button type="button" class="tbx-1170"><span class="tbx-1170__price"><small>FROM</small><b>¥8,800</b></span><span class="tbx-1170__action"><b>BOOK A VISIT</b><i aria-hidden="true">↗</i></span></button>
CSS
.tbx-1170{box-sizing:border-box;appearance:none;display:flex;align-items:stretch;gap:4px;border:0;padding:0;background:transparent;cursor:pointer;color:#222;font-family:system-ui,sans-serif;min-height:68px}.tbx-1170__price,.tbx-1170__action{box-sizing:border-box;display:flex;align-items:center;justify-content:center;transition:transform .32s,background .32s,box-shadow .32s}.tbx-1170__price{width:104px;flex-direction:column;gap:1px;border-radius:12px 3px 3px 12px;background:#f5cb80;color:#38260c;clip-path:polygon(0 0,100% 0,100% 37%,92% 50%,100% 63%,100% 100%,0 100%)}.tbx-1170__price small{font:700 10px system-ui;letter-spacing:.13em}.tbx-1170__price b{font-size:19px;line-height:1.2}.tbx-1170__action{width:152px;gap:18px;padding:0 12px;border-radius:3px 12px 12px 3px;background:#253746;color:white;font:700 11px system-ui;letter-spacing:.045em}.tbx-1170__action i{font:normal 25px system-ui;transition:transform .3s}.tbx-1170:is(:hover,:focus-visible) .tbx-1170__price{transform:translateY(-8px);box-shadow:0 10px 18px #bd812333}.tbx-1170:is(:hover,:focus-visible) .tbx-1170__action{background:#116c77;transform:translateX(3px)}.tbx-1170:is(:hover,:focus-visible) i{transform:rotate(45deg)}.tbx-1170:focus-visible{outline:3px solid #11798b;outline-offset:4px;border-radius:12px}
@media (prefers-reduced-motion: reduce) { .tbx-1170, .tbx-1170 *, .tbx-1170::before, .tbx-1170::after, .tbx-1170 *::before, .tbx-1170 *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Booking / Pricing
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても必要な情報にアクセスできる実装を推奨。
Browser：Chrome・Firefox・Safari・Edgeの現行版を想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。