パーツ番号 04-05-04 ・ CSSのみ

アイコン付きボタンセット(左/右/アイコンのみ)

アイコンの配置パターンを並べた静止見本。ダウンロードや外部リンクなど用途別ボタンのレイアウト検討に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-05-04-wrap">
          <button class="d04-05-04-btn"><span class="d04-05-04-ic">&#9679;</span>アイコン左</button>
          <button class="d04-05-04-btn">アイコン右<span class="d04-05-04-ic">&#9679;</span></button>
          <button class="d04-05-04-btn d04-05-04-only" aria-label="アイコンのみ"><span class="d04-05-04-ic">&#9679;</span></button>
        </div>

CSS

.d04-05-04-wrap{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:center; }
        .d04-05-04-btn{ display:inline-flex; align-items:center; gap:8px; background:#0891b2; color:#fff; border:none; border-radius:6px; padding:10px 18px; font-size:13px; font-weight:600; font-family:inherit; cursor:default; }
        .d04-05-04-ic{ font-size:10px; }
        .d04-05-04-only{ padding:10px; border-radius:50%; }

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