To change the style of a button when it’s clicked using CSS, you can use the :active
pseudo-class. When the button is active, you can set a new style to change the appearance of the button.
For example, to change the background color of a button to green when it’s clicked, you can use the following code:
button:active {
background-color: green;
}
You can modify this code to include more styles or change the properties that are modified when the button is clicked.
Here’s an example of how you can modify the button text when it is clicked using JavaScript:
<button id="myButton" onclick="changeText()">Click me</button>
<script>
function changeText() {
var button = document.getElementById("myButton");
if (button.innerHTML === "Click me") {
button.innerHTML = "Clicked!";
} else {
button.innerHTML = "Click me";
}
}
</script>
This code adds a click event listener to the button that calls the changeText
function. The function checks the current text of the button and changes it to the opposite text when it is clicked. You can modify this code to change other properties of the button as well.