当其中一个变大时按钮会轻微移动| html答案

【问题标题】：Buttons moving slightly when one of them is getting bigger | html当其中一个变大时按钮会轻微移动| html
【发布时间】：2023-03-30 07:29:01
【问题描述】：

在我的网站中，我有 4 个彼此相邻的按钮，将鼠标悬停在它们上方时它们应该会稍微变大，当我将鼠标悬停在它们上方时它们确实会变大，只是它们也会相互推动。这是video我为了显示这个问题而制作的，我为质量极低而道歉，我使用的编辑器非常糟糕。当我将鼠标悬停在其中一个按钮上时，您仍然可以看到按钮在移动。

这是文件的代码

<html id='body' onLoad='load()' onResize='load()'>
    <title>MarketGame</title>
    <meta property="og:title" content="Markget">
    <meta property="og:description" content="Game">
    <meta property="og:type" content="website">
    <meta name="theme-color" content="#17b023">
    <style>
      @import url('https://fonts.googleapis.com/css?family=Exo:400,700');
      *{
      margin: 0px;
      padding: 0px;
      scroll-behavior: smooth;
      }
      body{
      font-family: 'Exo', sans-serif;
      background: #17b023;
      }
      .context {
      width: 100%;
      position: absolute;
      top:10vh;
      }
      .context h1{
      text-align: center;
      color: #fff;
      font-size: 36px;
      font-size: 5vw;
      }
      .context{
      text-align: center;
      color: #fff;
      font-size: 36px;
      font-size: 2.5vw;
      }
      .buttons {
      background-color: #850BF4;
      border: none;
      color: white;
      padding: 16px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 30px 10px;
      transition-duration: 0.4s;
      cursor: pointer;
      }
      .button2 {
      background-color: #850BF4;
      color: white;
      border: 2px solid grey;
      }
      .button2:hover {
      padding: 18px 34px;
      background-color: #e6d119;
      border: 2px solid black;
      color: white;
      }

    </style>
  <body onload='load()'>
    <div id="autumn">
    </div>
    <div class="context" style="position: absolute; top: 0%">
        <p style="font-size: 70; padding: 20px;">Welcome To MarketGame</p>
        <p style="font-size: 50; padding: 20px"><b>What do you want to do?</b></p>
        -------------------------------------the buttons-----------------------------------
        <button class="buttons button2" type="button" onClick="window.location.href='/about'" style="border-radius: 10px">Play a game</button>
        <button class="buttons button2" type="button" onClick="window.location.href='/about'" style="border-radius: 10px">Play a game</button>
        <button class="buttons button2" type="button" onClick="window.location.href='/about'" style="border-radius: 10px">Play a game</button>
        <button class="buttons button2" type="button" onClick="window.location.href='/about'" style="border-radius: 10px">Play a game</button>
        -------------------------------------------------------------------------------

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src='https://unpkg.com/trianglify@^4/dist/trianglify.bundle.js'></script>
    <script>
      function load() {
        var autumn = document.getElementById("autumn");
        while (autumn.firstChild) {
          autumn.removeChild(autumn.firstChild);
        }
        var colors = ['#F4850B', '#EFF40B', '#F4100B']
      var pattern = trianglify({
    cellSize: 75,
    variance: 0.75,
    xColors: colors,
    yColors: colors,
    colorSpace: 'rgb',
    strokeWidth: 1.51,
    width: window.innerWidth,
    height: window.innerHeight
});
document.getElementById('autumn').appendChild(pattern.toCanvas())
}
window.addEventListener('resize', load);
    </script>
  </body>
</html>

【问题讨论】：

我会将每个按钮包装在单独的 div 元素中，这些元素具有比按钮更大的固定宽度。这将允许在不推送其他内容的情况下更改按钮大小

标签： javascript html web button

【解决方案1】：

如果您使用display: flex 为每个按钮使用包装器，它将按您的意愿工作。

.button-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 200px;
}

.buttons {
  background-color: #850BF4;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button2 {
  border-radius: 10px;
  background-color: #850BF4;
  color: white;
  border: 2px solid grey;
}

.button2:hover {
  padding: 18px 34px;
  background-color: #e6d119;
  border-color: black;
}

<div class="button-wrapper">
  <button class="buttons button2">Play a game</button>
</div>
<div class="button-wrapper">
  <button class="buttons button2">Play a game</button>
</div>
<div class="button-wrapper">
  <button class="buttons button2">Play a game</button>
</div>
<div class="button-wrapper">
  <button class="buttons button2">Play a game</button>
</div>

【讨论】：

【解决方案2】：

更改padding 将更改文档的大小和流向。如果您想要不干扰流程的动画，请使用transform 属性。

.button2:hover {
  transform: scale(1.1);
  background-color: #e6d119;
  border: 2px solid black;
  color: white;
}

【讨论】：

scale 也会导致文本缩放。

【解决方案3】：

有很多方法可以做到这一点。我个人的偏好是让按钮的背景是在 CSS 中创建的伪元素，并且当您悬停时，该元素会更改其相对于按钮的位置。按钮的文本需要包含在一个 span 中：

div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

button {
  display: inline-block;
  margin: 30px 10px;
  padding: 16px 32px;
  border: none;
  font-size: 16px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  background: transparent;
}

button span {
  position: relative;
  z-index: 2;
}

button:before {
  transition-duration: 0.4s;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid grey;
  z-index: 1;
  background-color: #850BF4;
  border-radius: 10px;
  content: '';
}

button:hover:before {
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  background-color: #e6d119;
  border-color: black;
}

<div>
  <button><span>Hello World</span></button>
  <button><span>Hello World</span></button>
</div>

【讨论】：