Stitched Edge Travel CTA

Live Demo

マウスを乗せるかTabキーでフォーカスして動作を確認してください。

Source Code

必要なコードをコピーして実装に利用できます。

<div class="tbx-1218"><a href="#demo-1218" class="tbx-1218-cta"><span class="tbx-1218-seam" aria-hidden="true"></span><span class="tbx-1218-title">Explore the coast</span><span class="tbx-1218-tag"><span class="tbx-1218-word">JOURNEYS</span><b aria-hidden="true">↗</b></span></a></div>

.tbx-1218{box-sizing:border-box;max-width:100%;overflow:visible}
.tbx-1218{display:grid;place-items:center;min-height:200px;padding:22px;width:100%;background:#d9e8e4;font-family:Arial,sans-serif}.tbx-1218 *{box-sizing:border-box}.tbx-1218-cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:73px;width:min(100%,298px);padding:16px 15px 16px 22px;background:#235c61;color:#fff;text-decoration:none;border-radius:5px;isolation:isolate;outline-offset:5px}.tbx-1218-seam{position:absolute;inset:7px;border:1px dashed #c3f5dc9c;pointer-events:none;transition:inset .35s,border-color .35s}.tbx-1218-title{position:relative;z-index:1;font-weight:800;font-size:16px;white-space:nowrap;transition:transform .4s}.tbx-1218-tag{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow:hidden;width:19px;white-space:nowrap;font-size:10px;font-weight:900;letter-spacing:.08em;opacity:1;transition:width .42s}.tbx-1218-word{opacity:0;transition:opacity .25s}.tbx-1218-tag b{font-size:17px;font-weight:500;flex:none}.tbx-1218-cta:is(:hover,:focus-visible) .tbx-1218-word{opacity:1}.tbx-1218-cta:is(:hover,:focus-visible) .tbx-1218-seam{inset:4px;border-color:#e9ffd0}.tbx-1218-cta:is(:hover,:focus-visible) .tbx-1218-tag{width:104px;opacity:1}.tbx-1218-cta:is(:hover,:focus-visible) .tbx-1218-title{transform:translateX(-3px)}.tbx-1218-cta:focus-visible{outline:3px solid #ffc77e}
@media(prefers-reduced-motion:reduce){.tbx-1218 *, .tbx-1218 *::before,.tbx-1218 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}

How to Use

HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。

Use Case

CTA, Travel

Technical Notes

ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。

Mobile：タッチ端末では重要な情報をホバー時だけに限定しないでください。

Browser：最新のChrome・Safari・Firefox・Edgeでご確認ください。

Reduced Motion：prefers-reduced-motion: reduceに対応。