1

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

3 Answers 3

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

just need :hover styling

1

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. :)

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.