How to keep the size of the button the same regarding the font-size is change during transition?

Question

How to change font-size inside a button without changing the side of a button and without provoking changes in the nav?

As you can see in this website the question mark changes, but I need that to change alone. The nav or section and the button must not change.

nav {
  text-align: center;
  padding: 10px;
  display: block;
}

button {
  height: 70px;
  width: 70px;
  background-color: #AAAAAA;
  border: .5px solid crimson;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 30px 0 crimson, 0 0 30px 0 crimson, 0 0 10px 0 crimson inset;
  margin: 10px;
}

.links {
  background-color: rgb(51, 51, 51);
  margin: 10px;
}

#shark {
  color: #FFFFFF;
  background-color: black;
  border-radius: 25%;
  transition-property: border-radius, border, color;
  transition-duration: .1s;
  transition-timing-function: .1s;
  transition-delay: .3s;
  margin: 10px;
}

#shark:hover {
  border-color: orange;
  color: orange;
}

#bshark {
  width: 100px !important;
  height: 20px !important;
  line-height: 0px;
  color: #AAAAAA;
  background-color: black;
  border-radius: 25%;
  box-shadow: none;
  transition-property: border-radius, border, color;
  transition-duration: .1s;
  transition-timing-function: .1s;
  transition-delay: .3s;
}

#bshark:hover {
  border-color: orange;
  color: orange;
}

#cshark {
  width: 100px !important;
  height: 20px !important;
  line-height: 0px;
  padding: 20px;
  color: #AAAAAA;
  background-color: black;
  border-radius: 25%;
  box-shadow: none;
  transition-property: border-radius, border, color, font-size;
  transition-duration: .1s;
  transition-timing-function: .1s;
  transition-delay: .3s;
}

#cshark:hover {
  border-color: green;
  color: green;
  font-size: 20px;
  padding: 20px;
  width: 100px !important;
  height: 20px !important;
}

<nav class="links">
  <a href=""><button id="bshark">Protective</button></a>
  <a href=""><button id="bshark">Destructive</button></a>
  <a href=""><button id="cshark">?</button></a>
</nav>

If you want to visualize the problem that I'm talking about you can visit this website.

Thank you all for answering my questions not matter the silly they are.

Answer 1

Try adding these four properties to your .links selector:

    .links {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      ...existing
    }

https://jsfiddle.net/uberrobert/kj8zobqd/6/

If necessary, you can adjust your button selector horizontal margins if you need exact spacing to sync w/your existing layout (e.g. margin: 10px 18px;) . Hope that helps!