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

Question

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>

please embed your code to a compiler so, we can run and easly answer your quesion. — gsharew, Jun 05 '22 at 07:50
@gsharew That is a very strange way of saying "please create a runable snippet". — connexo, Jun 05 '22 at 08:24

connexo · Accepted Answer · 2022-06-05T08:20:17.740

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>

score 1 · Answer 2 · edited Jun 05 '22 at 08:03

.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 {
  border: 1.5px solid transparent;
  margin-right: 20px;
  white-space: nowrap;
  font-size: 100%;
}

.lucky-button {
  border: 1.5px solid transparent;
  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>

Just add this in button CSS

border: 1.5px solid transparent;

@Ahmad That is why code-only answers are almost never good answers. See my answer for an explanation. Answers should not only be judged based on whether "it works", but also - and mainly - on how it helps understanding the problem, and the solution. — connexo, Jun 05 '22 at 08:15

score 0 · Answer 3 · answered Jun 05 '22 at 08:27

Your problem is your default button style has no border. When the hover button gets some border and it gets more space, you can solve this problem. just use defult button css,

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

.lucky-button {
  margin-left: 20px;
  white-space: nowrap;
  border: 1.5px solid transparent;
}

just put the css it will work, as you want. :)

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

3 Answers3