How To Maintain The Bottom Border Color Displayed When A Primefaces Commandbutton Is Clicked?

Question

I have 3 command buttons that filters a datatable and I want to keep the bottom border active to indicate which button was clicked.

So far, what I've done in a CSS is:

.ui-button.ui-state-hover, .ui-button.ui-state-active {
  border-bottom-color: #ccff00;
  border-bottom-style: solid;
  border-bottom-width: thick;
}

Using the above CSS, when I hover over a button, the color of the bottom border changes, as expected; but when I click the button, the color of the bottom border doesn't keep activated and the button go back in its original normal state.

Does anyone knows how can I do to keep the color of the bottom border in a button last clicked ?

Thanks in advance.

Answer 1

To achieve the goal of leaving the border the same color after clicking it, we need to use Javascript to append or attach a new class

This is also using jQuery for quickness.

$(".btn").click(function(){
  $(this).addClass("active");
});

body {
  margin:50px;
}

button {
  padding:20px;
  border:4px solid #333;
  background-color: #fff;
  color:#333;
  transition.5s;
}

button:hover {
  border-bottom-color:red;
  transition:.5s;
}

.active {
  border-bottom-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">Click Me!</button>
<button class="btn">Click Me!</button>
<button class="btn">Click Me!</button>

Now the active class will be attached onto the button as long as the page is not refreshed/reloaded. If you want to remove the class simply check on click again and see if the class is attached, if so remove it and repeat.