パーツ番号 04-13-11 ・ CSSのみ

サムズアップ/ダウン二択評価パネル

「役に立った/立たなかった」を件数付きの2択ボタンで表現した評価パネルの静止見本です。ブログ記事末尾やヘルプページのフィードバック収集UIに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-13-11-panel">
          <p class="d04-13-11-q">この記事は役に立ちましたか？</p>
          <div class="d04-13-11-row">
            <div class="d04-13-11-btn on">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 11v10H4V11zM7 11l4-9a2 2 0 012 2v6h6.5a2 2 0 011.9 2.6l-2 7a2 2 0 01-1.9 1.4H7"/></svg>
              <span>128</span>
            </div>
            <div class="d04-13-11-btn">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 13V3h3v10zM17 13l-4 9a2 2 0 01-2-2v-6H4.5a2 2 0 01-1.9-2.6l2-7A2 2 0 016.5 3H17"/></svg>
              <span>12</span>
            </div>
          </div>
        </div>

CSS

.d04-13-11-panel{display:flex;flex-direction:column;align-items:center;gap:14px}
        .d04-13-11-q{margin:0;font-size:12.5px;color:#475569;font-weight:600}
        .d04-13-11-row{display:flex;gap:14px}
        .d04-13-11-btn{display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;height:56px;justify-content:center;border-radius:12px;border:2px solid #e2e8f0;color:#94a3b8}
        .d04-13-11-btn span{font-size:11px;font-weight:700}
        .d04-13-11-btn.on{border-color:#22c55e;color:#16a34a;background:#f0fdf4}

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