How To Make Buttons Permanently Appear Disabled and Enabled When Clicked [HTML] [CSS]
I've been trying to create a button that, when clicked, will permanently change its background color to appear enabled until it's clicked again.
I haven't been able to do this though and I'm wondering if it's possible without Javascript. I've tried multiple tutorials but to no avail.
Currently I have:
html:
<button class="Date" disabled>Show Dates</button>
and
css:
.Date:disabled {
background-color: white;
color: black;
border: 2px solid orange;
float: right;
margin-right: 20px;
margin-top: 22px;
border-radius: 4px;
padding: 10px 28px;
}
.Date {
background-color: orange;
color: black;
border: 2px solid orange;
float: right;
margin-right: 20px;
margin-top: 22px;
border-radius: 4px;
padding: 10px 28px;
}
The only thing that differs in the css is the background color but currently nothing happens when you click.
I've tried
.Date:active
Yet realised this only affects the button while your clicking it, not afterwards as well.
As of now I'm just trying to make them go from this:
To this:
When clicked, and revert back when clicked again.
If anyone can answer my questions of
- Is it possible?
- If so, how?
That would be really helpful, thanks :)