Change color of button text by clicking

Question

I’d like to know how to change the color of the text of the button writing when I click on it, I want me to click on the button and it comes out of the golden color and stay in the white color until I click on it again, but what I’ve achieved so far is that it changes color only when the mouse gets on top. Below is the css and html code I’ve made so far: css:

#login{
        @extend .table;
        cursor:pointer;
        position:relative;
        width: 100%;
        height: 79px;

        #centralizar_menu{
            @extend .row;
            text-align: center;
            height: 4.8em;}

        &:hover{
            #texto_cliente #titulo{
                display: block!Important;
                @extend .fonte_branca_13;
            }
            background-color: $dourado;
        }

        #texto_cliente{
            width: 100%;
            height: 1.5em;
            padding: 0.5em 0em;

            #titulo{
                @extend .fonte_dourado_13;
            }
        }
    }

HTML:

<div id="login">
    <div id="centralizar_menu">
        <div class="middle">
            <div id="texto_cliente">
                <div id="titulo">Login</div>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="clearfix"></div>
</div>

Answer 1

You can use the pseudo class

&:active{
   //aqui vem como você quer que ele fique quando for clicado
}

the same way you used Hover

Answer 2

Following button option: OBS: Using Sass:

.botao_licitacao {
    background: #003366;
    border: none;
    box-shadow: none;
    border-radius: 0px;
    height: em(45);
    font-weight: bold;
    &:hover{
        background: #072440;
    }
    span{
        color: #fff;
    }
    p{
        color: #fff !important;
        @extend .fonte_light;
        font-size: 15px;
        text-decoration: none;
        box-shadow: none;
        text-shadow: none;
        width: 100%;
        text-align: center;
        margin: 0px !important;
    }
    &:hover{
        background: #072440;
    }
    &:hover{
        background: #072440;
    }
    &:visited{
        background: #072440;
    }
}

Answer 3

I would use jQuery for that;

var $divLogin = $("#login");
$divLogin.click(function(){
if ($divLogin.hasClass("dourado"))
    $divLogin.addClass("branco").removeClass("dourado");
else
    $divLogin.addClass("dourado").removeClass("branco");
});

In your div initially add the class you want

<div id="login" class="dourado">Login</div>

And finally, define the css for each class

.dourado {
    color: yellow;
}

.branco {
    color: white;
}

Basically what is done is to check which class is active in the div and exchange it for the other.

Answer 4

My problem was the same but simple to solve:

btn{
/*defini o botão*/
}

btn:hover{
/*Como ele vai ficar ao passar o mouse, ou para o mouse encima*/
}

btn:focus{
/*aqui está a resolução aqui define a cor que o botão deve receber depois de clicar*/
}