bootstrap 自定义按钮

最新推荐文章于 2024-12-08 06:18:04 发布

原创最新推荐文章于 2024-12-08 06:18:04 发布 · 754 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #自定义 #按钮

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Bootstrap自定义按钮样式，包括按钮的颜色、背景色和边框颜色等属性的设置。通过修改CSS类.btn-lk，可以实现按钮的个性化设计。

bootstrap 自定义按钮

<!-- index.html -->
<a href="#" class="btn btn-lk btn-sm">免费注册</a>

/* 按钮的自定义 */
.btn-lk {
    color: #ffffff;
    background-color: #8330F0;
    border-color: #9318F2;
}

.btn-lk:hover,
.btn-lk:focus,
.btn-lk:active,
.btn-lk.active,
.open .dropdown-toggle.btn-lk {
    color: #ffffff;
    background-color: #9146F2;
    border-color: #9318F2;
}

.btn-lk:active,
.btn-lk.active,
.open .dropdown-toggle.btn-lk {
    background-image: none;
}

.btn-lk.disabled,
.btn-lk[disabled],
fieldset[disabled] .btn-lk,
.btn-lk.disabled:hover,
.btn-lk[disabled]:hover,
fieldset[disabled] .btn-lk:hover,
.btn-lk.disabled:focus,
.btn-lk[disabled]:focus,
fieldset[disabled] .btn-lk:focus,
.btn-lk.disabled:active,
.btn-lk[disabled]:active,
fieldset[disabled] .btn-lk:active,
.btn-lk.disabled.active,
.btn-lk[disabled].active,
fieldset[disabled] .btn-lk.active {
    background-color: #8330F0;
    border-color: #9318F2;
}

.btn-lk .badge {
    color: #8330F0;
    background-color: #ffffff;
}

按钮自定义神器：http://blog.koalite.com/bbg/