How to change the color of the header button on a hover

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

This tutorial will teach you how to change the color of the header button on a hover in Squarespace 7.1

Pro Tip: If you don’t see a button on the header of your website, you can add one!
Hop into edit mode on any page and hover over the header of your site until you see the button that says edit site header. Click on that button and then click on the elements option in the menu that opens. Under elements, toggle on button and then add the text you want to be displayed along with the link you want that button to direct people to.

Below is the step by step tutorial for adding this code, and the codes you can copy and paste into your own site.

Here are the codes:
Be sure to change the colors in the codes below to match the color for your own site, and adjust any values in the shadow to change it’s shape and transition duration.

Solid Color

.header-actions .btn:hover {background-color: purple!important}

Colorful Drop Shadow

.header-actions .btn:hover {box-shadow: 9px 9px 0px 0px #ffc83d; transition: .5s}

.header-actions .btn {box-shadow:none; transition: .5s}

---

→ Why did I use the extra text !important in the code above?

If a browser reads more than one line of code to change an item, it won’t always pick the one you added. When you add the text !important the browser knows to pay attention to your new code.