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:

enter image description here

To this:

enter image description here

When clicked, and revert back when clicked again.

If anyone can answer my questions of

  1. Is it possible?
  2. If so, how?

That would be really helpful, thanks :)

Tags: