Keep hover color on button in active state

Site URL: https://www.rando.report

@tuan, I hoped this might be easy...

I installed universal filter plugin. I'm using it to sort with tags. i have the tags looking similar to other buttons on my site. Hover color is correct, and the tags should be working with multiples enabled. But I can't figure out how to keep the hover color visible when the button is active, going back to regular background color when it is clicked a second time to deactivate.

I also wanted this to apply to the tag buttons that show up on mobile in the filter overlay.

https://www.rando.report/all-the-stuff

Believe this is the css code I have shaping the tag filter buttons. I guess they are a customized version of my site's medium buttons, though maybe that was not really the proper way to do it. In any case, the  hover color is defined here — can the active state be added in, or is this the wrong place for that?

.medium-buttons {
      /* font size */
   font-size: 12px !important;
  /* Button Text Color */ 
      color: #fff !important; 
    /* Glass tint/colour */ 
      background-color: rgba(255,255,255,.1) !important; 
    /* Corner rounding */
      border-radius: 20px !important; 
    /* Dropshadow */
      box-shadow: 0px 5px 10px rgba(0,0,0,.6)!important; 
    /* Hover transition speed */
      transition: all 0.5s !important; 
  &:hover {
    /* Glass tint/colour on hover */
      opacity: 1 !important;
      background-color:         rgba(222,0,255,.8) !important; 
    /*button font color*/
      color: #ffffff !important; 
      /* border */
    border-width: 0 !important
}
}

Thanks for any help you may have,

-daria

Hi. Can you share link to page where you use Filter plugin?

Hi, yeah. It's this page: https://www.rando.report/all-the-stuff

The filter plugin is the tags on the right, the buttons along the top are just buttons right now. Thanks for taking a look.

i got this one working thanks.