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

絵文字リアクション選択パネル

SNS風の絵文字リアクションを横並びにしたパネル見本。ブログ記事末尾の「読んだ感想」選択UIなどに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-13-06-panel">
          <span class="d04-13-06-react">&#128077;</span>
          <span class="d04-13-06-react active">&#10084;&#65039;</span>
          <span class="d04-13-06-react">&#128514;</span>
          <span class="d04-13-06-react">&#128558;</span>
          <span class="d04-13-06-react">&#128546;</span>
        </div>

CSS

.d04-13-06-panel{display:flex;gap:8px;padding:10px 14px;border-radius:999px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 2px 8px rgba(0,0,0,.06)}
        .d04-13-06-react{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;background:#f8fafc}
        .d04-13-06-react.active{background:#fee2e2;box-shadow:0 0 0 2px #ef4444 inset}

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