How to keep :active css style after click a button

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:
```css
#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; }

```

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.

<!-- begin snippet: js hide: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

<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>

<!-- end snippet -->


Javascript / jQuery
----

As such, there is no way in CSS to *absolutely* toggle a styled state- if none of the above work for you, you will either need to combine with a change in your HTML (e.g. based on a checkbox) or programatically apply/remove a class using e.g. jQuery

<!-- begin snippet: js hide: false -->

<!-- language: lang-js -->


$('button').on('click', function(){
$('button').removeClass('selected');
$(this).addClass('selected');
});


<!-- language: lang-css -->

button.selected{
color:red;
}

<!-- language: lang-html -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Item</button><button>Item</button><button>Item</button>


<!-- end snippet -->

In the [Divi Theme Documentation][1], it says that the theme comes with access to 'ePanel' which also has an 'Integration' section.

You should be able to add this code:

<script>
$( ".et-pb-icon" ).click(function() {
$( this ).toggleClass( "active" );
});
</script>

into the the box that says 'Add code to the head of your blog' under the 'Integration' tab, which should get the jQuery working.

Then, you should be able to style your class to what ever you need.


[1]:

[To see links please register here]

We're going to to be using a hidden checkbox.<br>
This example includes one "on click - off click 'hover / active' state"

--

To make content itself clickable:

**HTML**

<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>

**CSS**

#activate-div{display:none}

.my-div{background-color:#FFF}

#activate-div:checked ~ label
.my-div{background-color:#000}

<br><br>
To make button change content:

**HTML**

<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>

<label for="activate-div">
//MY BUTTON STUFF
</label>

**CSS**

#activate-div{display:none}

.my-div{background-color:#FFF}

#activate-div:checked +
.my-div{background-color:#000}



Hope it helps!!