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

Table of Contents

Question
Solution 1: JavaScript
Solution 2: CSS

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;
}