javascript - Background color of the button is not changing through tab key selection -

when hover on button through mouse pointer background color changing, through tab key background color 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> 

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