悬停时，按钮内的 div 会降低高度以提供动画和小暗底。但是文字也向上移动如何修复不移动文字

Question

我想创建一个按钮，如代码所示。悬停时，按钮内的 div 会降低高度以提供动画和深色底部。但是文字也向上移动了如何修复不移动文字。

请建议我如何正确地实现此按钮动画。

.effect-btn {
  text-align: center;
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: black;
  text-transform: capitalize;
  background-color: #d9d94c;
  padding: 20px 0px;
  width: 150px;
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.2s linear 0s;
  border: none;
  cursor: pointer;
}

.effect {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  //   top: 100%;
  top: 0;
  //   left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 14px;
  background-color: #f2f255;
  transition: all 0.2s linear 0s;
  border-radius: 5px;
}

.effect:hover {
  height: 90%;
}

<button class="effect-btn">
          <div class="effect">Text</div>
        </button>

Answer 1

将您的代码更新为

.effect-btn {
            display: inline-block;
            text-decoration: none;
            color: black;
            text-transform: capitalize;
            background-color: #f2f255;
            padding: 20px 0;
            width: 150px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s linear;
        }

        .effect-btn:hover {
            box-shadow: inset 0 -4px 0 #d9d94c;
        }

<button class="effect-btn">Text</button>

应该有效