Font color won't change on hover

user_8576549 0
Viewed 2287

I have this login button which looks like this:

enter image description here

Now when I hover on it, it would look like this:

enter image description here

I can't make the text white when I hover on it

My code:

.button {
    border: 0px solid #011f4b;
    background: #011f4b;
    padding: 3px 21px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    color: #ffffff;
    font-size: 12px;
    font-family: Questrial;
    text-decoration: none;
    vertical-align: middle;
    letter-spacing: 2px;
    }
   
   .button:hover {
    border: 0px solid #1292e1;
    background: #1292e1;
    color: white;
    }
   
   .button:active {
    background: #1292e1;
    color: #fff;
    }
<a href='#' class='button'>Login</a>

fonts colors css text html
2 Answers

Try to add ! !important that will force the color to white if there is another css code that set the color on hover to another one

user_87125030

Try to add the a tag in your selector to avoid having conlict with other CSS you may have in your site :

a.button {
  border: 0px solid #011f4b;
  background: #011f4b;
  padding: 3px 21px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  color: #ffffff;
  font-size: 12px;
  font-family: Questrial;
  text-decoration: none;
  vertical-align: middle;
  letter-spacing: 2px;
}

a.button:hover {
  border: 0px solid #1292e1;
  background: #1292e1;
  color: white;
}

a.button:active {
  background: #1292e1;
  color: #fff;
}
<a href='#' class='button'>Login</a>

you may also consider the !important to force keeping the white color like this :

a.button:hover {
      border: 0px solid #1292e1;
      background: #1292e1;
      color: white!important;
    }
user_86203330
Related