avoid the other button from gettting affected when hovering over the button in HTML and CSS

Issue

I have 2 buttons and a container surrounding them. made that container have a display of flex and centered the two buttons in the middle of the div. when I hover over one of them. the other changes slightly as well. How can I avoid this? I know that the issue is from display: flex; because it does what I want when I remove it. But I need to keep the elements centered,

.two-buttons-container {
  width: 30%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  font-size: 100%;
  background-color: rgb(242, 242, 242);
  border: none;
  border-radius: 2px;
  height: 100%;
  padding: 2vh;
}

.search-button {
  margin-right: 20px;
  white-space: nowrap;
  font-size: 100%;
}

.lucky-button {
  margin-left: 20px;
  white-space: nowrap;
}

.search-button:hover {
  border: 1.5px solid lightgray;
  cursor: pointer;
}

.lucky-button:hover {
  border: 1.5px solid lightgray;
  cursor: pointer;
}

<div class="two-buttons-container">
  <button type="submit" class="button search-button">Google Search</button>
  <form action="https://www.google.com/doodles"><button type="submit" class="button lucky-button">I'm feeling lucky</button></form>
</div>

Solution

Currently, hovering your buttons affects the dimensions of the button being hovered, because that border is only added to the button on hover.

To solve this, simply give your buttons an initial border with color transparent, so the border is already there before hovering.

border: 1.5px solid transparent;

On :hover then, all you need to change is the border-color:

.search-button:hover,
.lucky-button:hover {
  border-color: lightgray;
}

.two-buttons-container {
  width: 30%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  font-size: 100%;
  background-color: rgb(242, 242, 242);
  border: 1.5px solid transparent;
  border-radius: 2px;
  height: 100%;
  padding: 2vh;
  cursor: pointer;
}

.search-button {
  margin-right: 20px;
  white-space: nowrap;
  font-size: 100%;
}

.lucky-button {
  margin-left: 20px;
  white-space: nowrap;
}

.search-button:hover,
.lucky-button:hover {
  border-color: lightgray;
}

<div class="two-buttons-container">
  <button type="submit" class="button search-button">Google Search</button>
  <form action="https://www.google.com/doodles"><button type="submit" class="button lucky-button">I'm feeling lucky</button></form>
</div>

Answered By - connexo