如何实现点击并按住时按钮像素偏移效果，类似Discord导航栏服务器按钮

这个交互本质是触发元素激活状态时的位移动画，优先推荐纯CSS实现，代码更简洁性能也更好，也可以结合JS实现更自定义的交互逻辑。

纯CSS实现方案 #

只需要用到CSS的:active伪类和过渡属性即可完成基础效果，和Discord原生效果基本一致：

示例代码 #

<!-- 服务器按钮结构 -->
<button class="server-btn">
  <img src="服务器图标本地地址" alt="服务器图标">
</button>

.server-btn {
  /* 基础样式 可根据自己的设计调整 */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  background: #36393f;
  /* 核心：加过渡动画，让位移更流畅 */
  transition: transform 0.12s ease-out, opacity 0.12s ease-out;
}

/* 按住未松开的激活状态 */
.server-btn:active {
  /* 向下偏移2px，数值可以根据需求调整 */
  transform: translateY(2px);
  /* 可选：加轻微透明度变化，更贴近Discord原生效果 */
  opacity: 0.8;
}

效果说明 #

• 过渡时长设置为0.1~0.15s区间最符合指尖交互的手感，不会太生硬也不会有延迟感
• 如果想要更还原Discord的效果，还可以在:active状态下同步调小按钮的阴影值，模拟按压下去的立体感

CSS+JS自定义实现方案 #

如果需要处理更复杂的交互逻辑，比如按住时触发其他联动效果、自定义按下松开的动画曲线，可以搭配JS事件监听实现：

示例代码 #

.server-btn {
  /* 基础样式和上面一致 */
  transition: transform 0.12s ease-out, opacity 0.12s ease-out;
}
.server-btn.active-press {
  transform: translateY(2px);
  opacity: 0.8;
}

const serverBtn = document.querySelector('.server-btn');
// 按下时添加激活类
serverBtn.addEventListener('mousedown', () => {
  serverBtn.classList.add('active-press');
});
// 松开/移出按钮区域时移除激活类
['mouseup', 'mouseleave'].forEach(event => {
  serverBtn.addEventListener(event, () => {
    serverBtn.classList.remove('active-press');
  });
});

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