css - 为按钮设置自定义背景颜色

Question

更改按钮颜色的正确方法是什么？我的按钮：

<button id="easy_mode" href="#gameZone" class="btn waves-effect waves-light spacing theme-color" >

主题颜色：

.theme-color {
    background-color: #ee6e73;
}

.theme-color:hover {
    background-color: #F18B8F;
}

按钮在被点击后会失去颜色。我错过了什么？

Answer 1

它似乎工作正常。我猜你在某个地方犯了一个小的 PEBKAC 错误。可能想快速检查您的 HTML 和 CSS，看看是否有任何拼写错误。

.theme-color {
    background-color: #ee6e73;
}

.theme-color:hover {
    background-color: #F18B8F;
}

<button id="easy_mode" href="#gameZone" class="btn waves-effect waves-light spacing theme-color">Click me!</button>

Answer 2

    <button id="easy_mode" href="#gameZone" class="btn waves-effect waves-light spacing theme-color" >text</button>



    .theme-color {
        background-color: #ee6e73;
        border:none;
        cursor:pointer;
    }
    .theme-color:hover {
        background-color: #ffffff;
        border:none;
        cursor:pointer;
    }

试试这些 html 和 css 代码

你可以在这里查看 https://jsfiddle.net/kyfycnn7/