Human Cyborg Relations Human Cyborg Relations - 6 months ago 13
HTML Question

Making one button animate while others remain still

I've got three buttons in a row. I need each to change its height and color when I hover over it. There are two problems I want to fix:


  1. When one button changes height, the others move a little bit down

  2. The height only changes downward. I want the text in the button to remain in the center and the height to increase both upwards and downwards



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>


Note, I'm using bootstrap

Answer

#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>

Comments