How to Keep :Active CSS Style After Click a Button

How to keep an element :active even after clicking

For elements that accept user input focus, such as button elements, the :focus pseudo-class comes close to what you want. But in this case it looks like you can expand multiple sections, so :focus won't cut it here.

Instead, you can just use JS to apply an extra class, like so:

$("div[id^=flip]").click(function() {   $(this).toggleClass("flipClass-active").next("div[id^=panel]").stop().slideToggle("slow"); });

.panelClass,.flipClass {  padding: 5px;  padding-left: 15px;  border: solid 1px #c3c3c3;}.flipClass {  font-size: Large;  background-color: #4399CD;  color: #fff;  text-align: left;  cursor: pointer;  transition: all .1s ease-out;}.flipClass-active,.flipClass:active {  background: #fff;  color: #4399CD;}.flipClass::before {  content: '\f107';  font-family: FontAwesome;  font-style: normal;  font-weight: normal;  text-decoration: inherit;  padding-left: 6px;  padding-right: 8px;  transition: all .3s;}.flipClass-active::before,.flipClass:active::before {  content: '\f102';}.panelClass {  padding: 30px;  padding-top: 10px;  display: none;  background-color: #F3F5F6;  color: #000;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />Currently, the .flipClass:active CSS style sheet is working only for a brief moment (precisely until the duration of the mouseclick and maybe some small offset). Click and HOLD mouseclick when clicking on .flipClass to see the effect. I want it to stay!<div class="flipClass" id="flip1">FIRST HEADING</div><div class="panelClass" id="panel1">How to keep the first heading 'active' when this panel is showing? If I could figure that out, I could change the arrow to a pullup arrow too :3</div><div class="flipClass" id="flip2">SECOND HEADING</div><div class="panelClass" id="panel2">If both Headings have been clicked, this Heading and any other heading that were clicked should also be active (or atleast remain in the CSS state defined by .flipClass:active here)</div>

keep button:active after click

You could use jQuery to add a class to your button when clicked. Either change the color of the button text, add/change a border, add/change the background-color, etc.,

$('button').on('click', function(){    $('button').removeClass('active_button');    $(this).addClass('active_button');});
//Home button active on page load$(document).ready(function(){    $('#Home').addClass('active_button');});

.active_button{  background-color: #999;}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<button id="Home">Home</button><button>About</button><button>Work</button>  <button>Work1</button><button>Contacts</button>

How to style a clicked button in CSS

This button will appear yellow initially. On hover it will turn orange. When you click it, it will turn red. I used :hover and :focus to adapt the style.
(The :active selector is usually used of links (i.e. <a> tags))

button{  background-color:yellow;}
button:hover{background-color:orange;}
button:focus{background-color:red;}
a {  color: orange;}
a.button{  color:green;  text-decoration: none;}
a:visited {  color: purple;}
a:active {  color: blue;}

<button>Hover and Click!</button><br><br>
<a href="#">Hello</a><br><br><a class="button" href="#">Bye</a>

CSS change button style after click

If you're looking for a pure css option, try using the :focus pseudo class.

#style  {
    background-color: red;
}

#style:focus {     
    background-color:yellow;    
}

How to make buttons stay selected?

Here's an example using <input type="radio">:

.rating {
  display: flex;
  gap: 15px;
}

.rating label {
  flex: 1 1 auto;
  cursor: pointer;
}

.rating span {
  background-color: #8e95a2;
  padding: 15px;
  display: flex;
  align-content: center;
  justify-content: center;
}

.rating input {
  display: none;
}

.rating input:checked + span {
  background-color: blue;
  color: white;
}

<p>How satisfied were you overall?</p>
<div class="rating">
  <label for="rate-1">
    <input type="radio" id="rate-1" name="rate" value="1" />
    <span>1</span>
  </label>
  <label for="rate-2">
    <input type="radio" id="rate-2" name="rate" value="2" />
    <span>2</span>
  </label>
  <label for="rate-3">
    <input type="radio" id="rate-3" name="rate" value="3" />
    <span>3</span>
  </label>
  <label for="rate-4">
    <input type="radio" id="rate-4" name="rate" value="4" />
    <span>4</span>
  </label>
  <label for="rate-5">
    <input type="radio" id="rate-5" name="rate" value="5" />
    <span>5</span>
  </label>
  <label for="rate-6">
    <input type="radio" id="rate-6" name="rate" value="6" />
    <span>6</span>
  </label>
  <label for="rate-7">
    <input type="radio" id="rate-7" name="rate" value="7" />
    <span>7</span>
  </label>
  <label for="rate-8">
    <input type="radio" id="rate-8" name="rate" value="8" />
    <span>8</span>
  </label>
  <label for="rate-9">
    <input type="radio" id="rate-9" name="rate" value="9" />
    <span>9</span>
  </label>
  <label for="rate-10">
    <input type="radio" id="rate-10" name="rate" value="10" />
    <span>10</span>
  </label>
</div>

<p>Name:</p>
<p><input type="text" name="name"></p>
<p><button type="button">Submit</button></p>