restrict div resize on button hover - html

Question

I'm creating a nav bar with buttons using css that I'd like to have a background color on hover WITHOUT the div resizing. I want the buttons to stay in place, just have the background color behind them.
.topnav {
overflow: hidden;
background-color: #1C313A;
}
.topnav a {
float: left;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav-right {
float: right;
}
button {
padding: 0px 0px;
background-color: transparent;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
margin-left: 20px;
}
button:hover {
width: 50px;
height: 50px;
background-color: #192C34;
border-radius: 50%;
padding: 0px 0px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav">
<a href="#home">
<button>
<i class="fa fa-save fa-lg"></i>
</button>
</a>
<a href="#news"><button>
<i class="fa fa-upload fa-lg"></i>
</button></a>
<a href="#contact">
<button>
<i class="fa fa-save fa-lg"></i>
</button>
</a>
<div class="topnav-right">
<a class="logo" style="pointer-events:none;">TidyBlocks</a>
</div>
</div>
Current Output:
Desired Output

Answer 1

.topnav {
overflow: hidden;
background-color: #1C313A;
}
.topnav a {
float: left;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav-right {
float: right;
}
button {
padding: 0px 0px;
background-color: transparent;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
margin-left: 20px;
width: 50px;
height: 50px;
}
button:hover {
background-color: #192C34;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav">
<a href="#home">
<button>
<i class="fa fa-save fa-lg"></i>
</button>
</a>
<a href="#news"><button>
<i class="fa fa-upload fa-lg"></i>
</button></a>
<a href="#contact">
<button>
<i class="fa fa-save fa-lg"></i>
</button>
</a>
<div class="topnav-right">
<a class="logo" style="pointer-events:none;">TidyBlocks</a>
</div>
</div>

Answer 2

Please put height and width in button not hover.
And yes you can't put button element in a tag it's not validated.
Please check your code on https://validator.w3.org/.
.topnav {
overflow: hidden;
background-color: #1C313A;
}
.topnav a {
float: left;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav-right {
float: right;
}
button {
border-radius: 50%;
padding: 0px 0px;
background-color: transparent;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
margin-left: 20px;
width: 50px;
height: 50px;
}
button:hover {
background-color: #192C34;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav">
<a href="#home">
<button>
<i class="fa fa-save fa-lg"></i>
</button>
</a>
<a href="#news"><button>
<i class="fa fa-upload fa-lg"></i>
</button></a>
<a href="#contact">
<button>
<i class="fa fa-save fa-lg"></i>
</button>
</a>
<div class="topnav-right">
<a class="logo" style="pointer-events:none;">TidyBlocks</a>
</div>
</div>