在按鈕更改高度後將標題保持放置

Question

我有一個頁面，我試圖進行動畫製作。現在發生的事情是，當頁面加載時，標題淡入並向上移動。之後，每當用戶將鼠標懸停在按鈕上時，該按鈕就會改變顏色和高度。問題是，每次按鈕更改高度時，它上面的文本（標題）也會向上移動。我如何防止這種情況發生？

除了提供解決方案，任何提示刪除多餘的代碼或其他風格的提示將不勝感激。

.nav-button { 
 
    width: auto; 
 
    font-size: 0.6em; 
 
    padding: 1%; 
 
    font-family: 'Raleway', sans-serif; 
 
    border: 0.1em solid; 
 
    border-color: transparent; 
 
    border-radius: 3%; 
 
    cursor: pointer; 
 
    opacity: 0.8; 
 
    height: 1.7em; 
 
} 
 
    
 
#apply-button { 
 
    background-color: #28A55C; 
 
    transition: background-color 0.3s ease-in-out; 
 
    transition-delay: 0.2s; 
 
    transition: height 0.3s ease-in-out; 
 
} 
 
    
 
#apply-button:hover { 
 
    background-color: #DF1C40; 
 
    height: 2.4em; 
 
} 
 
    
 
#about-button { 
 
    background-color: #97BBDD; 
 
    transition: background-color 0.3s ease; 
 
    transition-delay: 0.2s; 
 
    transition: height 0.3s ease-in-out; 
 
} 
 
    
 
#about-button:hover { 
 
    background-color: #DF1C40; 
 
    height: 2.4em; 
 
} 
 
    
 
#sponsor-button { 
 
    background-color: #FF9D28; 
 
    transition: background-color 0.3s ease; 
 
    transition-delay: 0.2s; 
 
    transition: height 0.3s ease-in-out; 
 
} 
 
    
 
#sponsor-button:hover { 
 
    background-color: #DF1C40; 
 
    height: 2.4em; 
 
}

<!-- intro page --> 
 
<div id="splash" tabindex='1'> 
 
    <div id="header"> 
 
     <div id="title"> 
 
      <strong>DubsTech</strong> 
 
      <br> 
 
      Students teaching Students 
 
      <br> 
 
     </div> 
 
     <button class="nav-button" id="apply-button">Apply!</button> 
 
     <button class="nav-button" id="about-button">About</button> 
 
     <button class="nav-button" id="sponsor-button">Sponsor</button> 
 
    </div> 
 
</div>

Answer 1

這是由於，所有的三個按鈕是兄弟「標題」元素的元素。任何佈局更改都會使其通用父元素「#header」發生更改。一種解決方案是使用另一個包裝「div」來包裝所有這些按鈕，並設置這個包裝「高度：2.4em」，以便按鈕的高度轉換不會影響「標題」。