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>

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

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

button.selected{
  color:red;
}

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

Answer 2

In the Divi Theme Documentation, 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.

Answer 3

I FIGURED IT OUT. SIMPLE, EFFECTIVE NO jQUERY

We're going to to be using a hidden checkbox.
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}

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

Answer 4

Although this question was asked pretty long time ago, I want to leave my own answer of my case for the reason that front-end is developing fastly. I am building an app in vuejs, and had the same need for active class on button click. I have 3 buttons and 2 select options. When one of three buttons at the beginning are clicked, it is active. But, when you click on select option it disappears. Also, I needed All button to be active when template is mounted (compiled).

Here is what I did using answers above and internet.I added classes btn--week,btn--month and btn--all respectively.

<div class="btn-group">
          <button
            type="button"
            class="btn btn-md light btn--week"
            v-on:change="latestType = 'week'"
          >Week</button>
          <button
            type="button"
            class="btn btn-md light btn--month"
            v-on:change="latestType = 'month'"
          >Month</button>
          <button
            type="button"
            class="btn btn-md light btn--all"
            v-on:change="latestType = ''"
          >All</button>
        </div>

In my methods option of vuejs script:

methods:{
 toggleButtonActiveClass() {
      // TODO: add and remove class when one is added
      $(".btn--week").click(function() {
        $(".btn--month").removeClass("active");
        $(".btn--all").removeClass("active");
        $(this).toggleClass("active");
      });
      $(".btn--month").click(function() {
        $(".btn--week").removeClass("active");
        $(".btn--all").removeClass("active");
        $(this).toggleClass("active");
      });
      $(".btn--all").click(function() {
        $(".btn--month").removeClass("active");
        $(".btn--week").removeClass("active");
        $(this).toggleClass("active");
      });
    }
}

and in mounted lifecycle:

 mounted() {
    this.toggleButtonActiveClass();
    $(".btn--all").toggleClass("active"); //to keep all button active when template created
  }

I know this is not perfect code style, but it worked for me. Hope it helps someone else in the future.