Javascript 按下/聚焦/禁用时更改按钮图像

我有几张相同按钮的图片，每一张都以不同的状态表示：正常、按下、聚焦、禁用

如何将其制作成一个html按钮，自动显示正确的图片（并具有onClick事件）

可以随意使用html/css/javascript

标签也不需要是一个按钮，它可以是一个图像，或任何你想要的，但希望以一种足够通用的方式编写，让其他人也能使用你的解决方案

---

谢谢

您可以使用CSS伪选择器并在不同的交互点更改按钮的状态，只需将函数绑定到事件中，即可在需要时运行其他JavaScript：

功能按钮单击（）{
log（“单击按钮”）；
}

按钮{/*默认状态*/
背景：白色；
}
按钮：悬停{/*在悬停状态*/
背景：红色；
}
按钮：单击后聚焦{/**/
背景：蓝色；
}

---

按钮

只需将类添加到链接：

<a href="#" class='styledbutton'>Buttontext</a>

---

到目前为止你试过什么吗？StackOverflow不是一个免费的代码编写服务，它希望您能够这样做。请更新您的问题，以展示您已经尝试过的内容，并展示您在某个领域面临的具体问题。有关更多信息，请参阅：）代码服务也不是。哦，哇，对不起：（我实际上在做一些更具体的事情（创建一个通过Firebase验证的Google登录按钮，使用React组件），但我目前的按钮处理似乎根本不是最佳做法（IV’e在我的职业生涯中完成了大量的C++，但这是我的第一个Web项目）。因为我没有找到这个非常普通的探听问题（一个改变图片的按钮）的最佳实践解决方案，我发布了这个问题。没问题，我可以用我当前的（反应）代码完整的例子来发布一个新的问题。（虽然我认为这对社区没什么用处）@obsidian，但你还是有反应吗？@Daedalus——我现在确实没有更好的事情要做，我认为这个答案至少可以帮助一些人：）很好。我很惊讶没有立即出现一个能更好地达到目的的重复目标。

.styledbutton {background: url(defaultstate.png); display: inline-block;}
.styledbutton:hover {background: url(hoverstate.png);}
.styledbutton:focus {background: url(focusstate.png);}