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

NPS風0〜10段階ボタン列

0〜10の数字ボタンを色分けで並べたNPS調査風の評価入力見本。顧客満足度アンケートフォームのデザインに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-13-07-wrap">
          <div class="d04-13-07-row">
            <span class="d04-13-07-box low">0</span>
            <span class="d04-13-07-box low">1</span>
            <span class="d04-13-07-box low">2</span>
            <span class="d04-13-07-box low">3</span>
            <span class="d04-13-07-box mid">4</span>
            <span class="d04-13-07-box mid">5</span>
            <span class="d04-13-07-box mid">6</span>
            <span class="d04-13-07-box high">7</span>
            <span class="d04-13-07-box high selected">8</span>
            <span class="d04-13-07-box high">9</span>
            <span class="d04-13-07-box high">10</span>
          </div>
          <div class="d04-13-07-labels"><span>おすすめしない</span><span>おすすめする</span></div>
        </div>

CSS

.d04-13-07-wrap{width:300px}
        .d04-13-07-row{display:flex;gap:3px}
        .d04-13-07-box{flex:1;height:30px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
        .d04-13-07-box.low{background:#ef4444}
        .d04-13-07-box.mid{background:#f59e0b}
        .d04-13-07-box.high{background:#22c55e}
        .d04-13-07-box.selected{box-shadow:0 0 0 2px #1e293b inset}
        .d04-13-07-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;color:#94a3b8}

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