パーツ番号 08-10-07 ・ CSSのみ

フォーカスで枠線がドローインするカード

キーボードでフォーカスすると輪郭線がSVGでするすると描き込まれます。WordPressの料金プランカードやサービス紹介カードの選択状態表現に使えます。

csssvg

プレビュー

ソースコード

HTML

<div class="d08-10-07-card" tabindex="0">
          <svg class="d08-10-07-outline" viewBox="0 0 220 130" aria-hidden="true">
            <rect x="2" y="2" width="216" height="126" rx="14"/>
          </svg>
          <div class="d08-10-07-body">
            <strong>プランA</strong>
            <span>Tabでフォーカスすると枠線が描画されます</span>
          </div>
        </div>

CSS

.d08-10-07-card{position:relative;width:100%;max-width:240px;border-radius:14px;padding:20px;background:#fbfbfd;cursor:pointer;outline:none}
        .d08-10-07-outline{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
        .d08-10-07-outline rect{fill:none;stroke:#6a5cff;stroke-width:2;stroke-dasharray:700;stroke-dashoffset:700;transition:stroke-dashoffset .6s ease}
        .d08-10-07-card:focus-visible .d08-10-07-outline rect{stroke-dashoffset:0}
        .d08-10-07-body{position:relative;display:flex;flex-direction:column;gap:6px}
        .d08-10-07-body strong{font-size:15px;color:#2a2d3a}
        .d08-10-07-body span{font-size:11.5px;color:#8a8f9c;line-height:1.5}

クラス名 .d08-10-07 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。