How to not have buttons shift css

Question

On my site (antetech.org) I use bttn.css for the nav buttons. On the buttons the letter-spacing is doubled on hover. When the right buttons are hovered, all the ones to the left shift over. How can I keep the letter-spacing effect without having the other buttons move? Here is the bttn.css code

.bttn-default {
color: #fff;
}
.bttn-primary, .bttn, .bttn-md {
color: #fff;
}
.bttn, .bttn-md {
margin: 0;
padding: 0;
border-width: 0;
border-color: transparent;
background: transparent;
font-weight: 400;
cursor: pointer;
position: relative;
}
.bttn-md {
font-size: 6px;
font-family: inherit;
padding: 1% 2%;
}
.bttn-stretch {
margin: 0;
padding: 0;
border-width: 0;
border-color: transparent;
background: transparent;
font-weight: 400;
cursor: pointer;
position: relative;
font-family: inherit;
padding: 1px 2px;
overflow: hidden;
border-width: 0;
border-radius: 0;
background: transparent;
color: #fff;
letter-spacing: 0;
-webkit-transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.bttn-stretch:after, .bttn-stretch:before {
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: currentColor;
content: '';
opacity: 0.65;
-webkit-transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
.bttn-stretch:after {
top: 0;
}
.bttn-stretch:before {
bottom: 0;
}
.bttn-stretch:hover, .bttn-stretch:focus {
letter-spacing: 2px;
opacity: 0.9;
-webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.bttn-stretch:hover:after, .bttn-stretch:focus:after {
opacity: 1;
-webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.bttn-stretch:hover:before, .bttn-stretch:focus:before {
opacity: 1;
-webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.bttn-stretch.bttn-md {
font-size: 120%;
font-family: inherit;
padding: 1px 2px;
}
.bttn-stretch.bttn-default {
color: #fff;
}
.bttn-stretch.bttn-primary {
color: #FFF;
}

Hopefully what I'm trying to do is possible, I'm not sure if it is. Thanks for the help <3

Answer 1

You can add a min-width to the buttons so that they're already big enough to display the text with the expanded letter spacing: .bttn-stretch { min-width: 5.25em; }

Using em units helps ensure this will still work regardless of the font-size. I'd recommend specifying your letter-spacing in fractional ems as well.

I would also scope the hover effect to non-touch devices. Something like:

@media only screen and (min-width: 420px) { /* this media query targets screens at least 420px wide. The intent here is to only apply the :hover styles on devices with a mouse. Admittedly, 420 pixels is a bit of an arbitrary value here, you might find a better way to target the right devices for your use case. */
    .bttn-stretch { min-width: 5.25em; } /* this sets a minimum value for the width of the buttons so that they're already big enough to accommodate the letter-spaced text before the :hover styles are applied */
    .bttn-stretch:hover, .bttn-stretch:focus {
        letter-spacing: 0.104em; /* Currently you've got this set to 2px. I prefer to use em units because it keeps the spacing proportional to the size of your font. Because your font size is set at 19.2px, a value of 0.104em gets you very close to your current letter-spacing of 2px. You could just use 0.1em if you're not bothered by the 0.004em difference */
        /* the following lines were in your existing style sheet, I've just copied them over */
        opacity: 0.9;
        -webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
        transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
    }
}

Answer 2

Setting the width of the parent div of your buttons and also giving your buttons a set width should give you the functionality that you want, just be mindful that you will have to adjust the values as the value i used was just to test, also make sure it carries over when the screen is reduced to mobile size you may need to edit some css in that case also

#second-nav{
  list-style: none;
  float: right;
  margin-top: 60px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 15px;
  padding-bottom: 15px;
  display: block;
  width: 480px;
}

#second-nav li{
  position: relative;
  display: inline-table;
  padding: 5px 20px;
  width: 70px;
}