CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Paulo Frutuoso
Paulo Frutuoso

Reputation: 311

How can I change state text color into a button

I have a button created in a bootstrap project but I can't change the text color when I click the button. In visited state, when the pointer is not in the button, the text changes to blue and I want to stay in white. I think the problem is with the bootstrap css file but I don´t know how to solve that problem

here's the fiddle: https://jsfiddle.net/pfrutuoso/Ljr8t8pz/

My html:

<div class="row">
   <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
      <div class="form-group">
         <label>CPF</label>
         <input type="text" class="form-control">
  <!--   <label class="form-error">Mensagem erro campo</label> -->    
      </div>
   </div>  
   <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
      <div class="form-group">          
         <button class="btn btn-validarForm" type="button">Validar CPF</button>
      </div>
   </div>    
</div>

and css:

.btn-validarForm{
    font-family: 'Aleo Bold';
    background-color: #8C0000;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    border-radius: 2px;
    border-top: 1px solid #D90000;
    border-bottom: 1px solid #8C0000;
    width:100%;
    font-size:14px;
    height:40px;
    margin-top:23px;
    border:none;        
}

.btn-validarForm:hover,
.btn-validarForm:active,
.btn-validarForm:visited{
    background-color: #B20000;
    color: #fff;
}

Upvotes: 0

Views: 71

Answers (1)

George
George

Reputation: 36784

Bootstrap also defines :focus state styles, override this in your CSS:

.btn-validarForm:hover,
.btn-validarForm:active,
.btn-validarForm:visited,
.btn-validarForm:focus{
    background-color: #B20000;
    color: #fff;
}

JSFiddle

Side-note: Most browsers come with the functionality within developer tools to trace the CSS styles for yourself. Chrome (not sure about other browsers) even let's you toggle the pseudo states and view the styles that will be applied for each state:

enter image description here

Upvotes: 2

Related Questions