Question

我连续有三个按钮。当我将鼠标悬停在它上面时，我需要每个都改变它的高度和颜色。我想解决两个问题：

当一个按钮改变高度时，其他按钮会向下移动
高度只会向下变化。我希望按钮中的文字保持在中心，高度可以向上和向下增加

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>

注意，我正在使用bootstrap

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>

使一个按钮具有动画效果而其他按钮保持静止

1 个答案: