Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#service" class="tbx-1176"><span class="tbx-1176__core"><small>OUR SERVICE</small><b>Strategy</b><em>↗</em></span><span class="tbx-1176__tag t1">Research</span><span class="tbx-1176__tag t2">Planning</span><span class="tbx-1176__tag t3">Creative</span></a>
CSS
.tbx-1176{box-sizing:border-box;position:relative;width:290px;max-width:100%;height:196px;border:1px solid #d8e3eb;border-radius:15px;background:#f6fafc;display:block;text-decoration:none;color:#28445b;overflow:hidden;font-family:system-ui,sans-serif}.tbx-1176__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150px;height:108px;border-radius:53%;background:#2e6471;color:white;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;z-index:1;box-shadow:0 8px 19px #2654663b;transition:transform .45s}.tbx-1176__core small{font-size:9px;letter-spacing:.15em}.tbx-1176__core b{font:600 23px Georgia,serif}.tbx-1176__core em{font:normal 17px system-ui}.tbx-1176__tag{position:absolute;font-size:10px;font-weight:650;white-space:nowrap;padding:7px 10px;border-radius:50px;background:white;border:1px solid #b7cad5;opacity:0;transition:transform .5s cubic-bezier(.15,.8,.2,1),opacity .35s}.tbx-1176 .t1{left:6%;top:15%;transform:translate(25px,40px)}.tbx-1176 .t2{right:4%;top:21%;transform:translate(-34px,30px)}.tbx-1176 .t3{left:34%;bottom:5%;transform:translate(0,-35px)}.tbx-1176:is(:hover,:focus-visible) .tbx-1176__core{transform:translate(-50%,-50%) scale(.92)}.tbx-1176:is(:hover,:focus-visible) .tbx-1176__tag{opacity:1;transform:translate(0,0)}.tbx-1176:focus-visible{outline:3px solid #16748b;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1176, .tbx-1176 *, .tbx-1176::before, .tbx-1176::after, .tbx-1176 *::before, .tbx-1176 *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Service / Features
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても必要な情報にアクセスできる実装を推奨。
Browser：Chrome・Firefox・Safari・Edgeの現行版を想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。