1つのボタンをアニメートして残りのボタンをアニメーションにする

Question

3つのボタンが連続しています。私はそれを上に置くと、それぞれの高さと色を変更する必要があります。

1. 1つのボタンの高さを変更し、他の人が高さだけ下方への変更ダウン
2. 少し移動：私は修正したい2つの問題があります。私は、ボタンのテキストが両方の上向きを高めるために、中心と高さのままにしたいと下向き

CSS：

#heading { 
    position: absolute; 
    bottom: 0%; 
    opacity: 0; 
} 

#title { 
    color: white; 
} 

h1 { 
    font-size: 5em; 
} 

h2 { 
    font-size: 4em; 
} 

#buttons { 
    height: 1.7em; 
    margin-top: 0.5em; 
} 

.each-button { 
    font-size: 3em; 
    padding: 1%; 
    font-family: 'Raleway', sans-serif; 
    border: 0.1em solid; 
    border-color: transparent; 
    border-radius: 3%; 
    opacity: 0.8; 
    height: 1.7em; 
} 

.each-button:hover { 
    color: white;  
} 

#apply-button { 
    background-color: #28A55C; 
    transition: height 0.25s ease; 
    transition-delay: 0.2s; 
} 

#apply-button:hover { 
    height: 2.4em; 
    background-color: #DF1C40; 
} 

#about-button { 
    background-color: #97BBDD; 
    transition: height 0.25s ease; 
    transition-delay: 0.2s; 
} 

#about-button:hover { 
    height: 2.4em; 
    background-color: #DF1C40; 
} 

#sponsor-button { 
    background-color: #FF9D28; 
    transition: height 0.25s ease; 
    transition-delay: 0.2s; 
} 

#sponsor-button:hover { 
    height: 2.4em; 
    background-color: #DF1C40; 
} 

HTML：

<div class="container-fluid"> 
    <div id="sections"> 
     <div id="opening-page"> 
      <div id="heading"> 
       <div id="title"> 
        <h1><strong>DubsTech</strong></h1> 
        <h2>Students Teaching Students</h2> 
       </div> 
       <div id="buttons"> 
        <button id="apply-button" class="each-button">Apply</button> 
        <button id="about-button" class="each-button">About</button> 
        <button id="sponsor-button" class="each-button">Sponsor</button> 
       </div> 
      </div> 
     </div> 

     <div id="apply-page"></div> 
     <div id="about-page"></div> 
     <div id="sponsor-page"></div> 
    </div> 
</div> 

注、私はブートストラップを使用して

Answer 1

#buttons>button { 
 
    -webkit-transition: all .3s ease-out; 
 
    -moz-transition: all .3s ease-out; 
 
    -o-transition: all .3s ease-out; 
 
    transition: all .3s ease-out; 
 
} 
 
#buttons>button:hover { 
 
    -webkit-transform: scale(1.1,1.1); 
 
    -moz-transform: scale(1.1,1.1); 
 
     -ms-transform: scale(1.1,1.1); 
 
     -o-transform: scale(1.1,1.1); 
 
      transform: scale(1.1,1.1); 
 
    -webkit-transform-origin: 50% 50%; 
 
    -moz-transform-origin: 50% 50%; 
 
     -ms-transform-origin: 50% 50%; 
 
     -o-transform-origin: 50% 50%; 
 
      transform-origin: 50% 50%; 
 
    cursor: pointer; 
 
} 
 

 
/** CSS below is already in your CSS, don't duplicate it **/ 
 
#buttons { 
 
    height: 1.7em; 
 
    margin-top: 0.5em; 
 
} 
 

 
.each-button { 
 
    font-size: 3em; 
 
    padding: 1%; 
 
    font-family: 'Raleway', sans-serif; 
 
    border: 0.1em solid; 
 
    border-color: transparent; 
 
    border-radius: 3%; 
 
    opacity: 0.8; 
 
    height: 1.7em; 
 
} 
 

 
.each-button:hover { 
 
    color: white;  
 
} 
 

 
#apply-button { 
 
    background-color: #28A55C; 
 
    transition: height 0.25s ease; 
 
    transition-delay: 0.2s; 
 
}

<div id="buttons"> 
 
    <button id="apply-button" class="each-button">Apply</button> 
 
    <button id="about-button" class="each-button">About</button> 
 
    <button id="sponsor-button" class="each-button">Sponsor</button> 
 
</div>