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

スプリットボタン(本体+矢印区切り)

主操作と補助オプションを区切り線で分けた分割ボタンの見本。エクスポート形式の選択などに使える構成。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-05-12-wrap">
          <div class="d04-05-12-split">
            <button class="d04-05-12-main">エクスポート</button>
            <button class="d04-05-12-arrow" aria-label="その他のオプション">&#9662;</button>
          </div>
        </div>

CSS

.d04-05-12-wrap{ display:flex; justify-content:center; }
        .d04-05-12-split{ display:inline-flex; border-radius:6px; overflow:hidden; }
        .d04-05-12-main{ background:#0f172a; color:#fff; border:none; padding:11px 20px; font-size:14px; font-weight:600; font-family:inherit; cursor:default; }
        .d04-05-12-arrow{ background:#1e293b; color:#fff; border:none; border-left:1px solid rgba(255,255,255,.2); padding:11px 14px; font-size:12px; font-family:inherit; cursor:default; }

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