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

once button clicked want stay active style instead of going normal style. can done css please? im using blurb button divi theme (wordpress). please 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; } 

css

:active denotes interaction state (so button applied during press), :focus may better choice here. however, styling lost once element gains focus.

the final potential alternative using css use :target, assuming items being clicked setting routes (e.g. anchors) within page- can interrupted if using routing (e.g. angular), doesnt seem 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 no way in css absolutely toggle styled state- if none of above work you, either need combine change in html (e.g. based on checkbox) or programatically apply/remove 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>