点击时播放/暂停按钮移位问题修复及优化方案咨询

问题原因 #

你的按钮点击后移位，是因为切换到暂停状态时，padding-top:8px和border-width的改动导致按钮元素的高度、垂直位置发生变化，进而带动旁边的文本一起偏移。原代码中播放状态的按钮高度是16px（由上下各8px的border组成），但暂停状态下不仅加了padding-top，还把border-width改成了0 0 0 var(--pauseButtonwidth)，这让按钮实际高度骤变，破坏了行内元素的垂直对齐。

修复现有代码 #

直接修改CSS，移除暂停状态的padding-top，同时调整border-width保持高度一致：

:root {
  --pauseButtonHeight: 16px;
  --pauseButtonWidth: 13px;
  --pauseButtonBorder: 8px;
}

.button {
  border: 0;
  background: transparent;
  box-sizing: border-box;
  width: 0;
  padding: 0;
  height: var(--pauseButtonHeight);
  border-color: transparent transparent transparent #7083d8;
  transition: 100ms all ease;
  cursor: pointer;
  border-style: solid;
  border-width: var(--pauseButtonBorder) 0 var(--pauseButtonBorder) var(--pauseButtonWidth);
  /* 强制垂直对齐，确保和旁边元素在同一水平线 */
  vertical-align: middle;
}

.button.paused {
  /* 移除导致移位的padding-top */
  /* padding-top: 8px; */
  border-style: double;
  /* 保持上下border宽度，维持总高度16px */
  border-width: var(--pauseButtonBorder) 0 var(--pauseButtonBorder) var(--pauseButtonWidth);
}

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

更优实现方案 #

用伪元素绘制播放/暂停图标，这种方式更稳定，不会因为border属性变化导致布局偏移：

<div>
  <label for="playspersecond">Updates per second: </label>
  <input type="number" id="playspersecond" value="5" min="0" max="10" />
  <button class="button" id="play"></button>
</div>

.button {
  border: none;
  background: transparent;
  width: 16px;
  height: 16px;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: all 100ms ease;
}

/* 播放状态：左侧三角形 */
.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 3px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid #7083d8;
  transition: all 100ms ease;
}

/* 暂停状态：两条竖线 */
.button.paused::before {
  border-left: none;
  width: 4px;
  height: 16px;
  background-color: #7083d8;
  box-shadow: 7px 0 0 #7083d8;
}

.button:hover::before {
  border-left-color: #404040;
  background-color: #404040;
  box-shadow: 7px 0 0 #404040;
}

const btn = document.querySelector(".button");
if (!btn) {
  throw new Error('could not find button');
}
btn.addEventListener("click", function() {
  btn.classList.toggle("paused");
});

这种方案用绝对定位的伪元素绘制图标，按钮本身宽高固定，切换状态时仅修改伪元素样式，不会改变按钮的布局尺寸，彻底解决移位问题，视觉效果也更精准。

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