:hover transition on 1 button affect the other one

Question

So I have 2 buttons inside a flexbox with a transition on hover that makes the button shrink in padding and darken. The only problem is that when I hover over one button and the transition performs, it moves the other button as well. How do I fix this.

TL;DR I don't want the other button to move when I :hover.

.buttons {
  margin-top: 3rem;
  display: flex;
  justify-content: space-evenly;
}

.buttons__change {
  /*👉left: 25%;
    position: relative;👈*/
  font-family: "Roboto", sans-serif;
  padding: 12px 52px;
  background: white;
  border: 2px solid rgb(201, 83, 5);
  color: rgb(201, 83, 5);
  font-size: 1.5rem;
  text-decoration: none;
  -webkit-appearance: none;
}

.buttons__pay {
  /*👉left: 45%;
    position: relative;👈*/
  font-family: "Roboto", sans-serif;
  padding: 12px 52px;
  background: rgb(201, 83, 5);
  border: 2px solid rgba(201, 83, 5);
  color: white;
  font-size: 1.5rem;
  text-decoration: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.buttons__change:hover,
.buttons__change:focus,
.buttons__pay:hover,
.buttons__pay:focus {
  background-color: rgb(209, 179, 124);
  opacity: .7;
  color: gray;
  cursor: pointer;
  padding: 8px 28px;
  -webkit-transition: .45s .08s;
  -o-transition: .45s .08s;
  transition: .45s .08s;
}

<div class="buttons">
  <a class="buttons__change" href="services.html">Change Selection</a>

  <button class="buttons__pay" type="submit">Secure Checkout</button>
</div>

Answer 1

You changed the padding, so elements that flow around it will adjust to the new spacing they need to flow around. The easiest solution is to account for the missing padding with an equal-sized margin.

The HTML box drawing has padding inside the box and margin outside the box, so you get the desired effect.

To be explicit, I set a zero margin on each button (which you could abstract btw—there's no need to duplicate any entries, that just makes them harder to update) and then added the pixels removed from the padding on :hover.

.buttons {
  margin-top: 3rem;
  display: flex;
  justify-content: space-evenly;
}

.buttons__change {
  /*👉left: 25%;
    position: relative;👈*/
  font-family: "Roboto", sans-serif;
  padding: 12px 52px;
  margin: 0;
  background: white;
  border: 2px solid rgb(201, 83, 5);
  color: rgb(201, 83, 5);
  font-size: 1.5rem;
  text-decoration: none;
  -webkit-appearance: none;
}

.buttons__pay {
  /*👉left: 45%;
    position: relative;👈*/
  font-family: "Roboto", sans-serif;
  padding: 12px 52px;
  margin: 0;
  background: rgb(201, 83, 5);
  border: 2px solid rgba(201, 83, 5);
  color: white;
  font-size: 1.5rem;
  text-decoration: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.buttons__change:hover,
.buttons__change:focus,
.buttons__pay:hover,
.buttons__pay:focus {
  background-color: rgba(209, 179, 124);
  opacity: .7;
  color: gray;
  cursor: pointer;
  padding: 8px 28px;
  margin: 4px 24px;
  -webkit-transition: .45s .08s;
  -o-transition: .45s .08s;
  transition: .45s .08s;
}

<div class="buttons">
  <a class="buttons__change" href="services.html">Change Selection</a>

  <button class="buttons__pay" type="submit">Secure Checkout</button>
</div>

I didn't want to change anything else about your code, but I do recommend the hovered buttons have at least as high a contrast as the buttons do before hovering. Legibility shouldn't decrease when your attention is focused on the button. (Try background-color: rgba(209, 179, 124, 0.7); color: black; for example. This ensures the text color isn't rendered 30% transparent (from your opacity: .7;) while the background color is.)