如何设置“按钮”和“按钮悬停”以保持内联？

Question

有一个小的Buttons CSS悬停，当我用鼠标光标悬停时，我看到悬停会移动并更改Button的内联顺序。

我所拥有的：

我要什么：

我尝试使用display:inline-block;，但没有成功。

请参见下面的代码段

.btn {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition: 0.3s;
  cursor:pointer;
  display:inline-block;
}

.btn:hover {
  padding: 30px;
  padding-left: 50px;
  padding-right: 50px;
  background-color: #eb1269;
  color: white;
  display:inline-block;
}

<h2>Fading Buttons - "Fade in Effect"</h2>

<button class="btn">Hover Over Me</button> 
<button class="btn">Hover Over Me</button>  
<button class="btn">Hover Over Me</button>

Answer 1

.btn {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 15px;
  transition: 0.3s;
  cursor:pointer;
  display:inline-block;
}

.btn:hover {
  transform:scale(1.3);
  background-color: #eb1269;
  color: white;
  display:inline-block;
}

<h2>Fading Buttons - "Fade in Effect"</h2>

<button class="btn">Hover Over Me</button> 
<button class="btn">Hover Over Me</button>  
<button class="btn">Hover Over Me</button>

Answer 2

不要更改任何内容，只需在秤上写

  .btn:hover {
      padding: 30px;
      padding-left: 50px;
      padding-right: 50px;
      background-color: #eb1269;
      color: white;
      display:inline-block;
      transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
    }

Answer 3

由于在您的示例中文本没有缩放，所以没有过渡，并且当鼠标悬停在相邻按钮上时，您可以添加box-shadow，同时玩position:relative和{{1} }

z-index

.btn {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 6px;
  cursor:pointer;
  position: relative;
  z-index: 1;
  display:inline-block;
}

.btn:hover {
  box-shadow: 0 0 0 20px #eb1269;
  background-color: #eb1269;
  z-index: 2;
  color: white;
}

Answer 4

您只需在transform: scale(1.3);中添加.btn:hover并删除填充

您还可以在margin: 4px 8px中设置.btn之类的适当边距，以使其看起来正确

Answer 5

添加了具有缩放功能的变换属性。 transform：scale（1.2）;

.btn {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition: 0.3s;
  cursor:pointer;
  display:inline-block;
}

.btn:hover {
  padding: 30px;
  padding-left: 50px;
  padding-right: 50px;
  background-color: #eb1269;
  color: white;
  display:inline-block;
  **transform: scale(1.2);**  
}

<h2>Fading Buttons - "Fade in Effect"</h2>

<button class="btn">Hover Over Me</button> 
<button class="btn">Hover Over Me</button>  
<button class="btn">Hover Over Me</button>