Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1131" href="#gallery"><span class="tbx-1131__iris" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><b>↗</b></span><span><strong>VIEW GALLERY</strong><small>ギャラリーを見る</small></span></a>CSS
.tbx-1131{width:min(281px,100%);height:102px;padding:13px 18px;display:flex;align-items:center;gap:15px;border:1px solid #c6d5df;border-radius:9px;background:#ebf2f5;color:#274e63;text-decoration:none;font-family:system-ui,sans-serif}.tbx-1131__iris{position:relative;width:70px;height:70px;flex:none;border-radius:50%;background:#315c71;overflow:hidden;border:4px solid #6c9b9f}.tbx-1131__iris i{position:absolute;inset:0;background:#acd1cb;clip-path:polygon(50% 50%,39% 0,61% 0);transform-origin:center;transition:transform .48s cubic-bezier(.2,.8,.2,1),opacity .48s}.tbx-1131__iris i:nth-child(2){transform:rotate(60deg)}.tbx-1131__iris i:nth-child(3){transform:rotate(120deg)}.tbx-1131__iris i:nth-child(4){transform:rotate(180deg)}.tbx-1131__iris i:nth-child(5){transform:rotate(240deg)}.tbx-1131__iris i:nth-child(6){transform:rotate(300deg)}.tbx-1131__iris b{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:29px;font-weight:400;transform:scale(.35) rotate(-30deg);opacity:0;transition:transform .48s,opacity .35s}.tbx-1131>span:last-child{display:flex;flex-direction:column;gap:5px}.tbx-1131 strong{font-size:12px;letter-spacing:.1em}.tbx-1131 small{font-size:9px;color:#6a899a}.tbx-1131:is(:hover,:focus-visible) .tbx-1131__iris i{opacity:.18}.tbx-1131:is(:hover,:focus-visible) .tbx-1131__iris i:nth-child(1){transform:rotate(35deg)}.tbx-1131:is(:hover,:focus-visible) .tbx-1131__iris i:nth-child(2){transform:rotate(95deg)}.tbx-1131:is(:hover,:focus-visible) .tbx-1131__iris i:nth-child(3){transform:rotate(155deg)}.tbx-1131:is(:hover,:focus-visible) .tbx-1131__iris i:nth-child(4){transform:rotate(215deg)}.tbx-1131:is(:hover,:focus-visible) .tbx-1131__iris i:nth-child(5){transform:rotate(275deg)}.tbx-1131:is(:hover,:focus-visible) .tbx-1131__iris i:nth-child(6){transform:rotate(335deg)}.tbx-1131:is(:hover,:focus-visible) .tbx-1131__iris b{transform:scale(1) rotate(0);opacity:1}.tbx-1131:focus-visible{outline:3px solid #6c9b9f;outline-offset:4px}@media(prefers-reduced-motion:reduce){.tbx-1131 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Iconography / UI Components
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報は通常時から見える状態にしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。