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

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 >
  <button type="submit" >Google Search</button>
  <form action="https://www.google.com/doodles"><button type="submit" >I'm feeling lucky</button></form>
</div>

CodePudding user response：

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 >
  <button type="submit" >Google Search</button>
  <form action="https://www.google.com/doodles"><button type="submit" >I'm feeling lucky</button></form>
</div>

CodePudding user response：

.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 >
  <button type="submit" >Google Search</button>
  <form action="https://www.google.com/doodles"><button type="submit" >I'm feeling lucky</button></form>
</div>

Just add this in button CSS

border: 1.5px solid transparent;

CodePudding user response：

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. :)