Skip to Content

Solved: How do I change buttton’s color on MouseDown, and submit form on MouseUp?

Question

How do I change a submit button’s color to red when pressed but not released (MouseDown function), the button’s color will change back and submit the form when released (MouseUp)?

Solution 1: JavaScript

<!DOCTYPE html>
<html>
<body>

<p id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()">
Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph, and sets the color of the text to red. The mouseUp() function is triggered when the mouse button is released, and sets the color of the text to green.
</p>

<script>
function mouseDown() {
document.getElementById("myP").style.color = "red";
}

function mouseUp() {
document.getElementById("myP").style.color = "green";
// add your submit function here
}
</script>

</body>
</html>

Solution 2: CSS

Add below CSS where “submitButton” is the ID of the button:

#submitButton:active {
background-color: red;
}
Tags

Tags

    Ads Blocker Image Powered by Code Help Pro

    Ads Blocker Detected!!!

    This site depends on revenue from ad impressions to survive. If you find this site valuable, please consider disabling your ad blocker.