I've implemented three push buttons in my code using input with type="button", which act as toggle buttons (on/off).
In the past, I used images to indicate when a button was pressed or reset, but now I want to achieve this effect using CSS. However, I'm unsure how to do it.
Additionally, I need to remove the border highlight when a button is selected.
I've searched for examples of this but haven't found anything useful.
Update:
I have some progress to share now. The code is somewhat functional; it displays the "depressed" look when holding down the mouse button, but reverts back to normal immediately upon release instead of staying depressed.
To prevent confusion, I've eliminated any extraneous code unrelated to this issue.
Second Update:
I've observed that in Firefox (not sure about other browsers), the default appearance of the buttons includes a depresses look when clicked, but it returns to normal upon releasing the mouse button. I aim to maintain the depressed look even after releasing the mouse button until the button is clicked again or until a different button is chosen.
input:hover { color: teal; }
.push:active { background: gray; color: aquamarine; }
.push:inactive { background: white; color: teal; } <INPUT type="button" class="push" style="font-weight: bold;">
<INPUT type="button" class="push" style="font-weight: bold;">
<INPUT type="button" class="push" style="font-weight: bold;">Final Update:
Many thanks to everyone who assisted me with this matter. I have discovered a more suitable solution for my needs. Below is the final version of the code. In this iteration, I simply alter the font color when a button is clicked - turning teal on first click and black on subsequent clicks or when another button is clicked. This color change is handled entirely within the JavaScript code. As part of this fix, the rollover highlight stopped working properly, and the resolution involved using onMouseOver and onMouseOut instead of the :hover pseudo-class within style tags in the head section. Interestingly, it seems the code doesn't function correctly when separated into HTML and JavaScript components within the snippet runner.
The rollover behavior works fine, but the selected button fails to display teal letters when the mouse moves away. Nonetheless, the code is provided here for those interested in experimentation.`
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Sample Solution Page</TITLE>
<SCRIPT type="text/javascript">
<!--
// Javascript functions here...
-->
</SCRIPT>
</HEAD>
<BODY>
<!-- Main body content here... -->
</BODY>
</HTML>
`