1

Gostaria de saber como faço pra alterar a cor do texto da escrita do botão quando eu clico nele, eu quero que eu clique no botão e ele saia da cor dourada e fique na cor branca até eu clicar novamente nele, mas o que eu consegui até agora é que ele mude de cor apenas quando o mouse fica em cima. Segue abaixo código css e html que eu fiz até o momento: 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>
3
  • você só quer com css? ou quer usar com jquery? Commented 12/11/2015 às 17:24
  • De preferência apenas com css Commented 12/11/2015 às 17:24
  • Já tentou usar com a pseudo-classe ":active" ? ali em cima você usou o hover, que é quando você passa o cursor do mouse. Commented 12/11/2015 às 17:27

4 Respostas 4

3

Podes usar a pseudo classe

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

do mesmo modo que você usou a hover

9
  • eu estou usando &:hover, já tentei com &:active, e ele permanece dourado Commented 12/11/2015 às 17:27
  • quer dizer, ele fica branco apenas quando eu seguro o botão do mouse clicado Commented 12/11/2015 às 17:29
  • como que eu faria com jQuery? Commented 12/11/2015 às 17:29
  • @BernardoKowacic, me mostre como ficou o código com &:active. Provavelmente, o que você quer somente com javascript/jquery Commented 12/11/2015 às 17:29
  • &:active{ #texto_cliente #titulo{ display: block!Important; @extend .fonte_branca_13; } background-color: $dourado; } Commented 12/11/2015 às 17:31
1

Segue opção de botão: OBS: Utilizando 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;
    }
}
1
  • 1
    Caso não utilize sass é só criar a classe com a propriedade ao lado, exemplo: .botao_licitacao p{} Commented 18/03/2016 às 14:45
1

Eu usaria jQuery para isso;

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

Na tua div adicione inicialmente a classe que desejar

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

E por fim, defina o css para cada classe

.dourado {
    color: yellow;
}

.branco {
    color: white;
}

Basicamente o que é feito é verificar qual classe está ativa na div e trocá-la para a outra.

0

Meu problema foi igual, mas simples de resolver:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .