Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1263"><button class="secure" type="button" aria-label="安全な接続について"><span class="shield"><span class="tick">✓</span></span><span class="caption">SECURE CHECKOUT <small>Encrypted connection</small></span></button></div>CSS
.tbx-1263{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:218px;overflow:visible;padding:24px 18px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#243e43}
.tbx-1263 *,.tbx-1263 *::before,.tbx-1263 *::after{box-sizing:border-box}
.tbx-1263{background:#eaf0ed}
.tbx-1263 .secure{border:1px solid #a9c5b9;border-radius:50px;background:#fff;color:#23453e;display:flex;align-items:center;gap:9px;max-width:100%;cursor:pointer;padding:9px 14px 9px 9px;box-shadow:0 5px 14px #193b2c20;font-family:inherit}
.tbx-1263 .shield{width:38px;height:43px;display:grid;place-items:center;background:#d9e8df;clip-path:polygon(50% 0,94% 15%,88% 66%,50% 100%,12% 66%,6% 15%);transition:background .35s,transform .35s}
.tbx-1263 .tick{font-size:19px;color:#598a70;transform:scale(.5);opacity:.25;transition:transform .35s,opacity .35s,color .35s}
.tbx-1263 .caption{text-align:left;font-size:10px;letter-spacing:.11em;font-weight:800;white-space:nowrap}
.tbx-1263 .caption small{display:block;max-height:0;opacity:0;transform:translateY(-5px);font-size:9px;font-weight:450;letter-spacing:0;transition:opacity .35s,max-height .35s,transform .35s}
.tbx-1263 .secure:is(:hover,:focus-visible) .shield{background:#2b7058;transform:scale(1.08)}
.tbx-1263 .secure:is(:hover,:focus-visible) .tick{transform:scale(1);color:#fff;opacity:1}
.tbx-1263 .secure:is(:hover,:focus-visible) .caption small{opacity:1;max-height:23px;transform:none;margin-top:3px}
@media (prefers-reduced-motion: reduce) {.tbx-1263 *, .tbx-1263 *::before, .tbx-1263 *::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Trust, Form
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーが利用できない場合があります。リンク・入力操作をホバー専用にしないでください。
Browser：Chrome・Firefox・Safari・Edgeの現行版を推奨。:has()利用素材は現行版で確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。