I came across a helpful discussion on the topic of CSS for pressed buttons, which provided some answers that I found useful. The link to the discussion can be found here: Pressed <button> CSS.
Currently, I have a button within a link and I would like it to retain its style after being pressed. Additionally, I want the button to revert back to its normal style when I click elsewhere on the page.
Here is the code snippet I am working with:
jQuery('.btnpublish').click(function(){
jQuery(this).toggleClass('active');
});.btnpublish{
background-color: #7f8c8d;
border: 1px solid #7f8c8d;
font-weight: bold;
}
.btnpublish:hover{
background-color: #3498db;
border: 1px solid #3498db;
}
.btnpublish:active{
background-color: #3498db;
border: 1px solid #3498db;
}
.btnpublish.active{
background-color: #3498db;
border: 1px solid #3498db;
}<ul class="" role="tablist">
<li class="active listlayer6publish"><a class="btn btn-dark btnpublish" href="#vtab1" role="tab" data-toggle="tab"> Sports</a></li>
<li class="listlayer6publish"><a class="btn btn-dark " href="#vtab2" role="tab" data-toggle="tab"> Santé</a></li>
</ul>Currently, the button retains its active style after being pressed, but I would like it to revert back to its normal style when I click anywhere else on the page.