CSS 自定义按钮颜色答案

【问题标题】：CSS Custom Button ColorsCSS 自定义按钮颜色
【发布时间】：2021-08-04 17:11:36
【问题描述】：

我正在尝试将此特定按钮的颜色更改为蓝色（称为 btn btn-primary mb-2 的 facebook 按钮），但是我无法访问其类文件。这是 HTML 代码和按钮 CSS

<div class ="login">
    <div class="form">
        <form class="login-form">
            <input type="text" placeholder="Username" />
            <input type="password" placeholder="Password" />
            <p class="forgot-password"><a class= "fgt-password" href="">Forgot Password</a></p>
            <button class="login-btn">Login</button>
            <h7>--------------------------------- OR ---------------------------------</h7>
            <button class="btn btn-primary mb-2">
                <a href="{% url 'rango:facebook_login' %}">Login with Facebook</a>
            </button>
        </form>

    </div>
</div>

这是 CSS 代码

.form button {
font-family: "Lato", sans-serif;
text-transform: uppercase;
outline: 0;
background: #006600;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;

}

我尝试了 .btn-primary 或 .form btn-primary，但没有任何效果。有什么想法可以通过 CSS 访问课程吗？

【问题讨论】：

facebook登录按钮颜色是#156FE5试试这个
您是否在此处使用引导程序并且您只想定位 facebook 登录按钮？

标签： html css django button

【解决方案1】：

你的问题是css，而不是djngog？？

我注意到您正在尝试覆盖 btn btn-primary 中存在的某些属性，因此请尝试在每个公共属性的末尾添加 !important 以强调您被覆盖的属性

【讨论】：

【解决方案2】：

试试这个对你有帮助

.form button {
font-family: "Lato", sans-serif;
text-transform: uppercase;
outline: 0;
background: #156FE5;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}

<div class ="login">
    <div class="form">
        <form class="login-form">
            <input type="text" placeholder="Username" />
            <input type="password" placeholder="Password" />
            <p class="forgot-password"><a class= "fgt-password" href="">Forgot Password</a></p>
            <button class="login-btn">Login</button>
            <h7>--------------------------------- OR ---------------------------------</h7>
            <button class="btn btn-primary mb-2">
                <a href="{% url 'rango:facebook_login' %}">Login with Facebook</a>
            </button>
        </form>

    </div>
</div>

【讨论】：