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

Question

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

我拥有的：

我想要的是：

我尝试使用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>