Html 如何在onclick输入类型按钮上应用不同的样式？

我使用的是一个HTML输入类型按钮，它有渐变背景色，反之亦然，但我想在点击时应该有纯色背景色，如果我释放按钮，它会显示为正常状态

那么，当你按住鼠标按钮时，你希望它改变样式，然后当你松开它时，它会恢复正常？jQuery中有一个

mousedown

和

mouseup

事件，您可以使用它

基本结构：

("#element").mousedown(function(){
    this.css();
});

("#element").mouseup(function(){
    this.css();
});

---

您需要在按钮中添加以下css

<button type="button" class="myBtn">Highlight me when Clicked</button>
.myBtn:active {
    background-color: #dd4814;

}

单击时突出显示我
.myBtn：活动{
背景色：#dd4814；
}

看。根据您的要求更改css。

您的HTML：

<input type="button" id="buttonId" value="Button" onclick="showChanges()"/>

和JS：

<script>
function showChanges(){
    document.getElementById("buttonId").style.backgroundColor ="red";
}
</script>

函数showChanges（）{
document.getElementById（“buttonId”）.style.backgroundColor=“红色”；
}

试试这个

    <input type="button" class="button_example" href="#" value="PREVIEW BUTTON"></input>

.button_example:active{
  background:#000;
}

.button_示例：活动{
背景：#000；
}

---

谢谢，这对我有帮助。