CSS 如何改变Bootstrap版本4按钮的颜色

在本文中，我们将介绍如何使用CSS改变Bootstrap版本4按钮的颜色，并提供示例说明。

阅读更多：CSS 教程

1. 修改按钮背景颜色

要改变Bootstrap 4按钮的背景颜色，我们可以使用CSS的”background-color”属性。可以直接在按钮的class中添加自定义的背景颜色类，也可以在CSS样式表中定义自己的类并将其应用于按钮。

例如，通过添加btn-primary类可以将按钮的背景颜色改为默认的Bootstrap主色：

<button type="button" class="btn btn-primary">Primary</button>

如果要使用自定义的背景颜色，可以在CSS样式表中定义一个新的类，并将其应用于按钮：

<style>
    .custom-btn {
        background-color: #ff0000; /* 自定义背景颜色，此处为红色 */
    }
</style>
<button type="button" class="btn custom-btn">Custom</button>

通过上述方法，可以轻松地改变按钮的背景颜色。

2. 修改按钮文本颜色

如果要改变按钮的文本颜色，可以使用CSS的”color”属性。同样地，可以通过在按钮的class中添加自定义的文本颜色类，或在CSS样式表中定义自己的类来实现。

例如，通过添加btn-danger类可以将按钮的文本颜色改为红色：

<button type="button" class="btn btn-danger">Danger</button>

如果要使用自定义的文本颜色，可以在CSS样式表中定义一个新的类，并将其应用于按钮：

<style>
    .custom-btn {
        color: #ff00ff; /* 自定义文本颜色，此处为洋红色 */
    }
</style>
<button type="button" class="btn custom-btn">Custom</button>

通过以上方法，可以灵活地改变按钮的文本颜色。

3. 修改按钮边框颜色

如果要改变按钮的边框颜色，可以使用CSS的”border-color”属性。同样地，可以通过在按钮的class中添加自定义的边框颜色类，或在CSS样式表中定义自己的类来实现。

例如，通过添加btn-info类可以将按钮的边框颜色改为Bootstrap默认的蓝色：

<button type="button" class="btn btn-info">Info</button>

如果要使用自定义的边框颜色，可以在CSS样式表中定义一个新的类，并将其应用于按钮：

<style>
    .custom-btn {
        border-color: #00ff00; /* 自定义边框颜色，此处为绿色 */
    }
</style>
<button type="button" class="btn custom-btn">Custom</button>

通过以上方法，可以轻松地改变按钮的边框颜色。

4. 修改按钮悬停状态颜色

除了常规状态下的颜色修改，我们还可以改变按钮在鼠标悬停状态下的颜色。这可以通过CSS的:hover伪类实现。

例如，通过添加btn-warning类可以将按钮在悬停状态下的背景颜色改为Bootstrap默认的黄色：

<button type="button" class="btn btn-warning">Warning</button>

如果要使用自定义的悬停状态颜色，可以在CSS样式表中定义一个新的类，并将其应用于按钮：

<style>
    .custom-btn:hover {
        background-color: #0000ff; /* 自定义悬停状态背景颜色，此处为蓝色 */
    }
</style>
<button type="button" class="btn custom-btn">Custom</button>

通过以上方法，可以自定义按钮在悬停状态下的颜色。

5. 修改按钮禁用状态颜色

最后，我们还可以改变按钮在禁用状态下的颜色。禁用状态的按钮通常具有不可点击和灰色的外观。

要改变按钮在禁用状态下的颜色，可以使用CSS的:disabled伪类。

例如，通过添加btn-secondary类可以将按钮在禁用状态下的背景颜色改为Bootstrap默认的灰色：

<button type="button" class="btn btn-secondary" disabled>Secondary</button>

如果要使用自定义的禁用状态颜色，可以在CSS样式表中定义一个新的类，并将其应用于按钮：

<style>
    .custom-btn:disabled {
        background-color: #555555; /* 自定义禁用状态背景颜色，此处为灰色 */
        color: #ffffff; /* 自定义禁用状态文本颜色，此处为白色 */
    }
</style>
<button type="button" class="btn custom-btn" disabled>Custom</button>

通过以上方法，可以自定义按钮在禁用状态下的颜色。