css 按钮滑入展示 多个按钮

以下是一个示例，其中有三个按钮，当鼠标悬停在按钮上时，按钮将滑入并显示出来。

HTML 代码：

<div class="button-container">
  <button class="button">按钮1</button>
  <button class="button">按钮2</button>
  <button class="button">按钮3</button>
</div>

CSS 代码：

.button-container {
  display: flex;
  justify-content: center;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.button:before {
  content: "";
  position: absolute;
  background-color: #333;
  width: 100%;
  height: 0%;
  bottom: 0;
  left: 0;
  z-index: -1;
  transition: height 0.3s ease-in-out;
}

.button:hover:before {
  height: 100%;
}

解释：

• .button-container：使用 flexbox 布局来水平居中按钮。
• .button：设置按钮的样式，包括背景颜色、字体颜色、边框、内边距等。
• position: relative：使得按钮的伪元素 .button:before 相对于按钮定位。
• overflow: hidden：隐藏按钮的伪元素。
• .button:before：创建一个伪元素作为按钮的背景，为其设置一个黑色背景色并将其定位在按钮底部。
• transition: height 0.3s ease-in-out：设置过渡效果，当鼠标滑过按钮时，将伪元素的高度从 0% 缓慢地过渡到 100%。
• .button:hover:before：当鼠标滑过按钮时，将伪元素的高度从 0% 缓慢地过渡到 100%，从而使按钮的黑色背景色滑入并显示出来。