Change button text color when clicking

Question

Change button text color when clicking

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (0 votes)

1

I would like to know how to change the text color of the button writing when I click on it, I want it to click on the button and it will turn out golden and stay white until I click it again, but what I managed so far is that it only change color when the mouse is on top. Here is the code that I have done 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>

html css bootstrap-3

asked by anonymous 12.11.2015 / 18:17

4 answers

3

You can use pseudo-class

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

The same way you used hover

12.11.2015 / 18:26

1

I would use jQuery for this;

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

In your div, add the class you want first

<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 change it to the other.

12.11.2015 / 18:27

0

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*/
}

04.02.2017 / 23:04

Detect when a new file was created Right way to get a particular div

score 1 · Accepted Answer

Follow button option: NOTE: 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;
    }
}