html - How to keep :active css style after click a button

Question

Once the button is clicked I want it to stay with the active style instead of going back to normal style. Can this be done with CSS please? Im using blurb button from DIVI Theme (WordPress). Please help me!

code:

    #blurb-hover.et_pb_blurb .et_pb_blurb_content 
    .et_pb_main_blurb_image .et-pb-icon:hover {
           color: red !important; }
    
    #blurb-hover.et_pb_blurb .et_pb_blurb_content 
    .et_pb_main_blurb_image .et-pb-icon:selected {
      background-color: #ff4b46;
      color: #fff; }

    #blurb-hover.et_pb_blurb .et_pb_blurb_content 
    .et_pb_main_blurb_image .et-pb-icon:active {
        color: white !important;
       background-color: red; 
        width: 140px;
        height: 100px; }

Answer 1

CSS

:active denotes the interaction state (so for a button will be applied during press), :focus may be a better choice here. However, the styling will be lost once another element gains focus.

The final potential alternative using CSS would be to use :target, assuming the items being clicked are setting routes (e.g. anchors) within the page- however this can be interrupted if you are using routing (e.g. Angular), however this doesnt seem the case here.

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

<button class='active'>Active</button>
<button class='focus'>Focus</button>
<a href='#target1' id='target1' class='target'>Target 1</a>
<a href='#target2' id='target2' class='target'>Target 2</a>
<a href='#target3' id='target3' class='target'>Target 3</a>