CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Roberto Flores
Roberto Flores

Reputation: 789

Prevent text color to change when hover button

I am trying to prevent the button text to change color when the user hover overs the button.

I am using bootstrap but did not like the color so I just the same button but change the color.

However, unlike the bootstrap button, when i hover over the button, the text changes from white to black

The following is what I have:

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
 .btn-info1 {
  color: white;
  background-color: #004377;
  border-color: #004377;
  background-image: -webkit-linear-gradient(top, #004377 0, #004377 100%);
  background-image: -linear-gradient(to bottom, #004377 0, #004377 100%);
  background-repeat: repeat-x;
  border-color: #00437;
}
<a class="btn btn-info1 slideText" href="/index.cfm/finder/" role="button" style="
    ">Find Now</a>

What can I do to stop doing that when it is hovered and active?

Thanks

Upvotes: 1

Views: 9411

Answers (3)

Jonathan
Jonathan

Reputation: 686

You need to specify a rule that sets the text color on hover. This should do the trick:

.btn-info1:hover {
    color: #fff;
}

You may need to be more specific with your selectors.

Upvotes: 1

Claudio Bonfati
Claudio Bonfati

Reputation: 503

You can set all 'variables' of your link. I use it on my projects.

.link, 
.link:hover, 
.link:active, 
.link:focus, 
.link:visited{
    /*Your code here, like:*/
    color: #FFF;
}

So the 'link' class will make all the magic. I hope it help you. :)

Upvotes: 1

Riskbreaker
Riskbreaker

Reputation: 4791

.btn-info1, .btn-info1:hover
{   text-decoration: none;
color: white; background-color: #004377; etc...}

just need :hover styling

Upvotes: 3

Related Questions