Jump to content

Keep hover color on button in active state

Recommended Posts

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

Link to comment
  • Replies 3
  • Views 844
  • Created
  • Last Reply
  • 3 weeks later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.