Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1160" href="#article"><span class="tbx-1160__index">FEATURE / 07</span><span class="tbx-1160__heading">A quieter kind<br>of luxury.</span><span class="tbx-1160__rails" aria-hidden="true"><i></i><i></i><i></i></span><span class="tbx-1160__read">READ THE STORY <b>↗</b></span></a>
CSS
.tbx-1160{box-sizing:border-box;display:flex;flex-direction:column;width:258px;max-width:100%;padding:16px 19px 14px;min-height:161px;border-left:4px solid #355f60;background:#ecf2ef;color:#163e3d;text-decoration:none;font-family:system-ui,sans-serif}.tbx-1160__index{font-size:9px;font-weight:850;letter-spacing:.14em;color:#65827f}.tbx-1160__heading{margin-top:7px;font:600 26px/1.06 Georgia,serif;letter-spacing:-.035em;transition:color .35s,transform .35s}.tbx-1160__rails{display:grid;gap:4px;margin:11px 0 8px}.tbx-1160__rails i{height:2px;background:#d8886b;display:block;width:24%;transform-origin:left;transition:width .4s cubic-bezier(.24,.9,.25,1)}.tbx-1160__rails i:nth-child(2){width:16%;transition-delay:.04s}.tbx-1160__rails i:nth-child(3){width:10%;transition-delay:.08s}.tbx-1160__read{font-size:9px;font-weight:850;letter-spacing:.13em}.tbx-1160__read b{font-size:15px;display:inline-block;margin-left:8px;transition:transform .3s}.tbx-1160:is(:hover,:focus-visible) .tbx-1160__heading{color:#bd5f41;transform:translateX(3px)}.tbx-1160:is(:hover,:focus-visible) .tbx-1160__rails i:first-child{width:92%}.tbx-1160:is(:hover,:focus-visible) .tbx-1160__rails i:nth-child(2){width:67%}.tbx-1160:is(:hover,:focus-visible) .tbx-1160__rails i:nth-child(3){width:43%}.tbx-1160:is(:hover,:focus-visible) .tbx-1160__read b{transform:translate(4px,-3px)}.tbx-1160:focus-visible{outline:3px solid #366b6e;outline-offset:3px}
@media (prefers-reduced-motion: reduce) {.tbx-1160, .tbx-1160 *, .tbx-1160::before, .tbx-1160::after, .tbx-1160 *::before, .tbx-1160 *::after {animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Editorial / Article
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても操作・情報取得ができるようにしてください。
Browser：最近のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。