通过选择制表键不改变按钮的背景色

Question

When I hover on the button through mouse pointer the background color is changing, but through the tab key background color is not changing.

In html

<style>
    .btn-primary {
        color: #fff;
        background-color: #227ab9;  
        border: none;
        cursor: pointer;
    }
    .BtnStyle {
        text-transform: uppercase;
        font-weight: 700;
        border-radius: 4px;
    }
    .btn-primary:hover,.btn-primary:focus,.btn-primary:active{
        background-color: #1a5e8e;

    }
</style>    

<table>
    <td><input id="txt" class="" type="text" value=""></td>
    <td id="go" class="BtnStyle btn-primary" >
        <button class="btn-primary"><i class="fa fa-chevron-save" aria-hidden="true"></i>test</button>
    </td>
</table>

Answer 1

<style>
    .btn-primary {
        color: #fff;
        background-color: #227ab9;  
        border: none;
        cursor: pointer;
    }
    .BtnStyle {
        text-transform: uppercase;
        font-weight: 700;
        border-radius: 4px;
    }
    .btn-primary:hover,.btn-primary:focus,.btn-primary:active{
        background-color: #1a5e8e;

    }
</style>    

<table>
    <td><input id="txt" class="" type="text" value=""></td>
    <td id="go" class="BtnStyle btn-primary" >
        <button class="btn-primary"><i class="fa fa-chevron-save" aria-hidden="true"></i>test</button>
    </td>
</table>

Answer 2

Your code is working fine for me! Please take a look at below code.

Or if you are still having a problem please share your full code in jsFiddle.

Take a look at this

body {
    padding: 50px;
}
.btn-primary {
  color: #fff;
  background-color: #227ab9;  
}
.BtnStyle {
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
}
 .btn-primary:hover,.btn-primary:focus,.btn-primary:active{
    background-color: red;// #1a5e8e;

}


<table>
    <td><input id="txt" class="" type="text" value=""></td>
    <td id="go" class="BtnStyle btn-primary" >
                <button class="btn-primary"><i class="fa fa-chevron-save" aria-hidden="true"></i> Button</button>
   </td>
</table>