HTML

how to keep :active css style after click a button

<!-- CSS Solution -->
<style>
  .active:active {
    color: red;
  }
  .focus:focus {
    color: red;
  }
  :target {
    color: red;
  }
</style>

<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>

<!-- JQuery Solution -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $('button').on('click', function(){
    $('button').removeClass('selected');
    $(this).addClass('selected');
  });
</script>

<style>
  button.selected{
    color:red;
  }
</style>

<button>Item</button><button>Item</button><button>Item</button>