Bootstrapで紫のカスタムボタンを作る

Bootstrapに紫のボタンがないのはなぁぜなぁぜ

おそらく、ブランドのカラーなので含まれていないと思われますが、公式の Examples に含まれています。(知ってた方はごめんなさい)

CSS

.btn-bd-primary{--bd-violet-bg: #712cf9;--bd-violet-rgb: 112.520718, 44.062154, 249.437846;--bs-btn-font-weight: 600;--bs-btn-color: var(--bs-white);--bs-btn-bg: var(--bd-violet-bg);--bs-btn-border-color: var(--bd-violet-bg);--bs-btn-hover-color: var(--bs-white);--bs-btn-hover-bg: #6528e0;--bs-btn-hover-border-color: #6528e0;--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);--bs-btn-active-color: var(--bs-btn-hover-color);--bs-btn-active-bg: #5a23c8;--bs-btn-active-border-color: #5a23c8}

見やすくすると

.btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8;
}

HTML

<button type="button" class="btn btn-bd-primary">Violet</button>

<a class="btn btn-bd-primary" href="#" role="button">Link</a>

Link

リンクは私のブログのCSSと干渉してますが、こんな感じ
( text-white のクラスを入れればいいですが)

こちらをベースにすればカスタマイズも簡単かも

カスタマイズ例

Link

追記
[Bootstrap]ピンクのカスタムボタン の投稿をエントリしました

単色でいい場合は style="background-color: #RRGGBB; を入れる方が楽ですが

• Bootstrapでダウンロードボタンを作る

JetThemeでカスタムボタンで統一感を出せるかな