如何实现播放暂停按钮hover显示对应文字，解决图标跳动与对齐问题

修复方案 #

1. 解决hover图标跳动问题

原因为display属性切换会改变元素布局尺寸，改为将文字设为绝对定位脱离文档流，用opacity控制显隐，不会影响原有图标布局。

2. 解决文字居中问题

给按钮添加相对定位作为父容器，文字通过位移属性实现水平垂直完全居中，匹配图标尺寸调整字号即可。

3. 解决状态对应文字问题

通过CSS伪元素的content属性绑定按钮的paused类，切换状态时自动加载对应文字，无需额外操作DOM。

完整修改后代码 #

CSS代码

.container {
  padding: 8px;
  border: 1px solid;
  display: inline-block;
}

.button {
  position: relative;
  border: 0;
  background: transparent;
  box-sizing: border-box;
  width: 0;
  height: 20px;
  border-color: transparent transparent transparent #202020;
  transition: 100ms all ease;
  cursor: pointer;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  padding: 0;
}

.button.paused {
  border-style: double;
  border-width: 0px 0 0px 20px;
}

.button:hover {
  border-color: transparent transparent transparent #404040;
}

/* 状态文字样式 */
.button::before {
  content: "PLAY";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: bold;
  color: #202020;
  opacity: 0;
  transition: opacity 100ms ease;
}
.button.paused::before {
  content: "PAUSE";
}
.button:hover::before {
  opacity: 1;
}

HTML代码

<div class="container">
  <button class='button'></button>
</div>

状态切换JS示例

const playBtn = document.querySelector('.button')
playBtn.addEventListener('click', () => {
  playBtn.classList.toggle('paused')
})

内容的提问来源于stack exchange，提问作者user5711656