Font color won't change on hover

Question

I have this login button which looks like this:

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

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> 

Answer 1

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

Answer 2

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;
    }