Remove outline on button on hover

Site URL: https://fennel-hawk-fwg3.squarespace.com/

https://fennel-hawk-fwg3.squarespace.com/ password: tails2021

I'd like to remove the white outline on hover state on the "JOIN OUR PACK" button in the nav.

I've tried a number of things in custom css with no luck. Any help would be appreciated!

Thank you in advance.

1 hour ago, lulu.lindberg said:

Site URL: https://fennel-hawk-fwg3.squarespace.com/

https://fennel-hawk-fwg3.squarespace.com/ password: tails2021

I'd like to remove the white outline on hover state on the "JOIN OUR PACK" button in the nav.

I've tried a number of things in custom css with no luck. Any help would be appreciated!

Thank you in advance.

You can try adding to Home > Design > Custom Css

.header-actions-action [href*="join-our-pack"]:hover:before {
  border:none !important;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

My testing result

@bangank36 It works! I do still see the stroke as I pull my cursor away from the button, but I can live what that unless you know of how to adjust that as well. :)

15 minutes ago, lulu.lindberg said:

@bangank36 It works! I do still see the stroke as I pull my cursor away from the button, but I can live what that unless you know of how to adjust that as well. 🙂

.header-actions-action [href*="join-our-pack"]:hover {
  background: #663817 !important;
}

You can add this one to fix it