Live Demo
マウスを乗せるか、Tabキーでフォーカスして動きを確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1193" type="button"><span class="tbx-1193__copy"><small>MEMBER ACCESS</small><strong>会員ページへ</strong></span><span class="tbx-1193__lock" aria-hidden="true"><i></i><b>➜</b></span></button>
CSS
.tbx-1193{display:flex;align-items:center;justify-content:space-between;gap:12px;width:245px;max-width:100%;height:78px;padding:13px 14px 13px 21px;background:#163949;color:white;border:0;border-radius:9px;cursor:pointer;font-family:system-ui;box-shadow:0 10px 20px #15334422;transition:background .3s,transform .3s}
.tbx-1193__copy{text-align:left;display:grid;gap:4px}.tbx-1193__copy small{font-size:9px;letter-spacing:.15em;color:#97d8d2}.tbx-1193__copy strong{font-size:16px}.tbx-1193__lock{height:45px;width:54px;border:1px solid #88c3c2;border-radius:6px;display:grid;place-items:center;position:relative;overflow:hidden}.tbx-1193__lock i{position:absolute;top:7px;right:9px;width:19px;height:7px;border:3px solid #8bccc1;border-bottom:0;border-radius:10px 10px 0 0;transform:translateX(0);transition:transform .38s}.tbx-1193__lock b{font-size:24px;transform:translateY(11px);opacity:.35;transition:transform .38s,opacity .38s}.tbx-1193:is(:hover,:focus-visible){background:#0d6171;transform:translateY(-2px)}.tbx-1193:is(:hover,:focus-visible) .tbx-1193__lock i{transform:translateX(15px)}.tbx-1193:is(:hover,:focus-visible) .tbx-1193__lock b{transform:translateY(1px);opacity:1}.tbx-1193:focus-visible{outline:3px solid #f8bc62;outline-offset:3px}
@media (prefers-reduced-motion: reduce) {.tbx-1193,.tbx-1193 *,.tbx-1193::before,.tbx-1193::after,.tbx-1193 *::before,.tbx-1193 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA / Membership
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバー時にだけ隠さない設計にしてください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。:has()およびclip-path等は対応ブラウザを確認。
Reduced Motion：prefers-reduced-motion: reduce 対応。