如何为普通按钮实现选中样式/动画（无需单选框/复选框）

完全可以实现只给最后点击的普通按钮添加选中样式或动画，核心思路是通过JavaScript控制CSS类的切换，结合CSS定义选中状态的样式和过渡动画。以下是具体实现方案：

1. 基础实现（切换选中样式） #

HTML结构 #

先创建一组普通按钮：

<button class="selectable-btn">按钮1</button>
<button class="selectable-btn">按钮2</button>
<button class="selectable-btn">按钮3</button>

CSS样式 #

定义按钮的默认样式，以及选中状态的.active类样式，可添加过渡动画让切换更平滑：

.selectable-btn {
  padding: 8px 16px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.3s ease; /* 过渡动画 */
}

/* 选中状态样式 */
.selectable-btn.active {
  background-color: #2196F3;
  color: #fff;
  border-color: #1976D2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

JavaScript逻辑 #

监听按钮的点击事件，点击时先移除所有按钮的.active类，再给当前点击的按钮添加该类：

const buttons = document.querySelectorAll('.selectable-btn');

buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    // 移除所有按钮的选中类
    buttons.forEach(b => b.classList.remove('active'));
    // 给当前点击的按钮添加选中类
    btn.classList.add('active');
  });
});

2. 自定义选中动画（类似示例效果） #

如果需要更复杂的选中动画（比如中心扩散的填充效果），可以通过CSS伪元素和关键帧动画实现：

扩展CSS（添加填充动画） #

.selectable-btn {
  position: relative;
  overflow: hidden;
  /* 保留之前的默认样式 */
}

.selectable-btn.active::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(33, 150, 243, 0.3);
  transform: translate(-50%, -50%);
  animation: fillAnimation 0.6s ease-out forwards;
}

@keyframes fillAnimation {
  to {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

这段代码会在按钮被选中时，从中心扩散出一个半透明的圆形填充动画，和示例效果一致。

核心原理 #

• 通过CSS类标记选中状态，完全脱离表单控件（单选/复选框）的依赖
• JavaScript负责统一管理类的切换，确保同一时间只有最后点击的按钮拥有选中类
• 利用CSS过渡或关键帧动画实现平滑的状态切换效果

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