Set a custom background color to the button

Question

What is the correct way to change the color of a button ? My button :

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

Theme color:

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

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

the button loses the color after it has been clicked. What am i missing ?

Answer 1

It seems to be working fine. I'm guessing you made a small PEBKAC mistake somewhere. Might want to check your HTML and CSS real quick to see if there are no typos anywhere.

.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;
    }

Try these html and css codes

You can check here https://jsfiddle.net/kyfycnn7/