Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1229"><a class="cta" href="#tb1229"><span class="corners" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span class="top">OUR APPROACH</span><strong>Explore services <span aria-hidden="true">↗</span></strong><small>企画から運用まで</small></a></div>CSS
.tbx-1229{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:212px;width:100%;max-width:100%;padding:19px;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;color:#18314a;}
.tbx-1229 * ,.tbx-1229 *::before,.tbx-1229 *::after{box-sizing:border-box}
.tbx-1229{background:#ecf1f2}.tbx-1229 .cta{position:relative;display:grid;align-content:center;gap:5px;min-height:106px;width:min(100%,282px);padding:23px 24px;color:#18394a;text-decoration:none;background:#fff;isolation:isolate;box-shadow:0 12px 24px #1647580c}.tbx-1229 .top{font-size:9px;letter-spacing:.18em;font-weight:800;color:#7a8b90}.tbx-1229 strong{font-size:19px;display:flex;justify-content:space-between;align-items:center;gap:8px}.tbx-1229 strong span{font-size:21px;transition:transform .35s}.tbx-1229 small{max-height:0;overflow:hidden;opacity:0;transform:translateY(5px);font-size:11px;color:#527184;transition:all .35s}.tbx-1229 .corners i{position:absolute;width:22px;height:22px;border:2px solid #3c8a91;transition:transform .4s,border-color .4s;pointer-events:none}.tbx-1229 .corners i:nth-child(1){left:7px;top:7px;border-right:0;border-bottom:0}.tbx-1229 .corners i:nth-child(2){right:7px;top:7px;border-left:0;border-bottom:0}.tbx-1229 .corners i:nth-child(3){left:7px;bottom:7px;border-right:0;border-top:0}.tbx-1229 .corners i:nth-child(4){right:7px;bottom:7px;border-left:0;border-top:0}.tbx-1229 .cta:is(:hover,:focus-visible) .corners i:nth-child(1){transform:translate(-9px,-9px)}.tbx-1229 .cta:is(:hover,:focus-visible) .corners i:nth-child(2){transform:translate(9px,-9px)}.tbx-1229 .cta:is(:hover,:focus-visible) .corners i:nth-child(3){transform:translate(-9px,9px)}.tbx-1229 .cta:is(:hover,:focus-visible) .corners i:nth-child(4){transform:translate(9px,9px)}.tbx-1229 .cta:is(:hover,:focus-visible) small{max-height:24px;opacity:1;transform:none}.tbx-1229 .cta:is(:hover,:focus-visible) strong span{transform:translate(3px,-3px)}.tbx-1229 .cta:focus-visible{outline:3px solid #bb613c;outline-offset:11px}
@media(prefers-reduced-motion:reduce){.tbx-1229 *, .tbx-1229 *::before,.tbx-1229 *::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA, Corporate
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーできないことがあります。必要な情報・操作はホバー以外でも利用できるようにしてください。
Browser：最新版Chrome・Safari・Firefox・Edgeをご使用ください。
Reduced Motion：prefers-reduced-motion: reduce対応。