Live Demo
素材の上にマウスを乗せるか、Tabキーでフォーカスして確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1181" href="#document"><span class="tbx-1181__corner" aria-hidden="true">↧</span><span class="tbx-1181__copy"><small>FREE RESOURCE</small><strong>Download guide</strong></span><span class="tbx-1181__arr" aria-hidden="true">→</span></a>
CSS
.tbx-1181{box-sizing:border-box;isolation:isolate;position:relative;display:flex;align-items:center;gap:13px;width:264px;max-width:100%;height:92px;padding:17px 16px 16px 57px;background:#fefaf0;color:#263b43;border:1px solid #c8d6d3;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);text-decoration:none;font-family:system-ui,sans-serif;transition:background .3s,box-shadow .3s}.tbx-1181__corner{position:absolute;left:0;top:0;width:43px;height:43px;display:grid;place-items:center;background:#2d6e70;color:white;font:850 25px/1 system-ui;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:width .42s,height .42s,background .3s}.tbx-1181__copy{display:grid;gap:5px;z-index:1}.tbx-1181__copy small{font-size:9px;font-weight:800;letter-spacing:.15em;color:#897e6e}.tbx-1181__copy strong{font-size:16px;white-space:nowrap}.tbx-1181__arr{margin-left:auto;font:24px/1 system-ui;transition:transform .35s;color:#216669}.tbx-1181:is(:hover,:focus-visible){background:#e5f5f1}.tbx-1181:is(:hover,:focus-visible) .tbx-1181__corner{width:49px;height:92px;background:#1a5056}.tbx-1181:is(:hover,:focus-visible) .tbx-1181__arr{transform:translate(5px,-5px)}.tbx-1181:focus-visible{outline:3px solid #237477;outline-offset:4px}
@media (prefers-reduced-motion:reduce) {.tbx-1181,.tbx-1181 *,.tbx-1181::before,.tbx-1181::after,.tbx-1181 *::before,.tbx-1181 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Download / CTA
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバーのみに隠さないよう実案件で調整してください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。一部の表現ではCSS :has()を利用。
Reduced Motion：prefers-reduced-motion: reduce に対応。