\"Selected\" 按钮动画/样式答案

【问题标题】："Selected" Button Animation/Style\"Selected\" 按钮动画/样式
【发布时间】：2022-11-28 17:41:06
【问题描述】：

我很好奇我怎么做一个普通的按钮，具有“选定”样式或动画。
<button> I'm a button </button>

当你使用单选按钮，您可以清楚地看到，无论何时单击该按钮，您都有一个选定的样式。
<input type="radio">

现在的问题是，是否可以为您单击的最后一个按钮选择样式或动画（不是单击/悬停动画）（显然不必使用单选按钮/复选框）。

如果是这样，如何做到这一点？

我没有找到很多关于此的文章，或者可能只是看起来不够好，无论如何，也许你们知道如何做到这一点？

【问题讨论】：

【解决方案1】：

只需使用 onclick 事件切换一个类：

btnState = false;
btn.addEventListener("click", () => {
    btn.classList.toggle("selected");
  btnState = !btnState;
});

在 CSS 中添加：

.selected {
  background-color: red;
}

并向 HTML 中的按钮添加一个 id="btn"。

【讨论】：