Pressed button css

Question

before I start, I found this topic : Pressed <button> CSS which give half of the answer I'm looking for.

I have a button in a link and I would like it to keep his style after it gets pressed. ALSO, I would like to see it back to his normal style (before it get pressed) when I click somewhere else on the page.

Here is my code :

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>

For now, when I press on the button "Sports", it keeps the active style before I press again on the button. The only problem is that i want to change it when I press anywhere else on the page.

"*when I click somewhere else on the page*", you mean other links in the page, or other links in that `ul`, or any click anywhere on the page even if not an `a` element? — Mi-Creativity, Nov 23 '15 at 03:13
the answer you said you were looking at works, what more do you want. — abc123, Nov 23 '15 at 03:18

score 1 · Accepted Answer · edited May 23 '17 at 12:23

It's much easier to use hidden radio inputs with labels. I added and modified the jQuery, although you don't need it for the effects. See this POST

$(function() {
  $('.btn').on('click', function(event) {
    $(this).addClass('active');
    $('.btn').not(this).removeClass('active');
  });
});

.tablist input[type="radio"] {
  display: none;
}
.tablist label {
  display: inline-block;
  background-color: #ddd;
  color: grey;
  padding: 3px 6px;
  font-family: Arial;
  font-size: 16px;
  border: 1px inset grey;
  border-radius: 6px;
  cursor: pointer;
}
.tablist input[type="radio"]:checked + label {
  background-color: transparent;
  color: blue;
  border: 1px inset blue;
}
fieldset {
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: -fit-content;
  border-radius: 6px;
}
.btn {
  text-decoration: none;
  /* When you integrate this code, change none to auto */
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="tablist">
  <input type="radio" id="r1" name="rad" data-toggle="tab" checked>
  <label for="r1" class="tag">
    <a href="#" class="btn active" data-toggle="tab">Sports</a>
  </label>

  <input type="radio" id="r2" name="rad" data-toggle="tab">
  <label for="r2" class="tag">
    <a href="#" class="btn" data-toggle="tab">Sante</a>
  </label>

  <input type="radio" id="r3" name="rad">
  <label for="r3" class="tag">
    <a href="#" class="btn" data-toggle="tab">Claus</a>
  </label>
</fieldset>

score 0 · Answer 2 · answered Nov 23 '15 at 03:20

0

Try that:

 jQuery(document).click(function () {
            jQuery(".listlayer6publish").each(function () {
                if (jQuery(this).hasClass("active"))
                    jQuery(this).removeClass("active");           
            });

answered Nov 23 '15 at 03:20

Phuong

35
1
6

score 0 · Answer 3 · answered Nov 23 '15 at 04:48

0

You can use the below css to achieve the required functionality

.btnpublish:focus {
background-color: #3498db;
border: 1px solid #3498db;
}

answered Nov 23 '15 at 04:48

Pressed button css

3 Answers3