ボタンの高さを変更した後にタイトルを入れ続ける

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

これは、すべての3つのボタンが「タイトル」要素の要素を兄弟していることによるものです。レイアウトの変更によって、共通の親要素 "#header"が変更されます。 1つの解決策は、これらのボタンをすべてラップするために別のラッパー「div」を使用し、ボタンの高さの遷移が「タイトル」に影響を及ぼさないようにこのラッパー「高さ：2.4em」を設定することです。