javascript - 按钮的背景颜色不会通过 Tab 键选择而改变

Question

当我通过鼠标指针悬停在按钮上时，背景颜色会发生变化，但通过 Tab 键背景颜色不会改变。

在 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>