Live Demo
マウスを乗せるかTabキーでフォーカスして動きを確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1033" type="button"><span class="tbx-1033__mark" aria-hidden="true">✦</span><strong>クリエイティブ制作</strong><span class="tbx-1033__desc">Web design & development</span><span class="tbx-1033__go" aria-hidden="true">詳しく見る ↗</span></button>
CSS
.tbx-1033{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:min(244px,100%);min-height:163px;padding:20px;border:1px solid #d4e2e8;border-radius:10px;background:#fff;color:#263e56;text-align:left;cursor:pointer;overflow:hidden;transition:border-color .32s ease}
.tbx-1033::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 84% 5%,#c6ebea 0,transparent 65%);opacity:0;transition:opacity .35s ease}
.tbx-1033__mark{color:#307f88;font-size:20px;line-height:1}.tbx-1033 strong{font:750 15px/1.4 system-ui,sans-serif}.tbx-1033__desc{font:500 11px/1.4 system-ui,sans-serif;color:#63798a}.tbx-1033__go{margin-top:auto;font:700 11px/1.4 system-ui,sans-serif;color:#357e90}
.tbx-1033:is(:hover,:focus-visible){border-color:#79bfc0}.tbx-1033:is(:hover,:focus-visible)::before{opacity:1}
.tbx-1033:focus-visible{outline:3px solid #855fc2;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.tbx-1033,.tbx-1033::before{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
事業紹介・サービスカード
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作が必要な素材はクリック・入力にも対応。hover専用装飾は重要情報を隠さない設計です。
Browser：最新のChrome、Firefox、Safari、Edge向けのCSS。複数環境で最終検証してください。
Reduced Motion：prefers-reduced-motion: reduceに対応。