If you want to change the hover color in Squarespace, there are a few different ways you can do it. One way is to use the Custom CSS panel in the Design tab of your site editor. You can also use the Code Injection tool under the Advanced tab. For the last option, you can add a Code Block to your section.
In most cases, changing the hover color is a matter of adding a couple of lines of code to your site’s CSS. If you’re uncomfortable working with code, the Custom CSS panel or Code Injection tool can be a good option. These tools will let you add CSS without having to edit your site’s code directly.
If you want to change the hover color for all links on your site, you’ll have to use the Custom CSS panel.
To do this, go to your Design Settings.
In the Design Settings window, select the Custom CSS option.
This will open the Custom CSS panel where you can add your code.
Add the code below in the space provided on your Custom CSS panel. You can see the effect of the code you added in real time. Just hover your cursor over the button, and you will see that the hover color has been changed. Once done, click the “Save” button at the top of the Custom CSS panel.
.sqs-block-button-element:hover{
background-color: blue!important
}
If you only want to change the hover color for links on a specific page, you’ll need to use a Code Injection tool. For example, let’s say you only want to change the hover color for links in all the buttons on your website’s specific page.
To do this, select the page from the Main Navigation panel and click on the gear icon to open the Page Settings window.
In the Page Settings window, select the Advanced Settings tab.
Then, add the code below to your Code Injection field, then click “Save” to save your changes.
<style>
.sqs-block-button-element:hover{
background-color: #39ff14!important
}
</style>
Refresh your page, and you will see that the hover color of your button has been changed.
You can add a Code Block to your section for the last option. This will change the hover color of all links in a specific section.
To do this, simply select the page you want to edit and click on the “Edit” button.
From there, go to the section where you want to change the hover color of a link, then click on the “Add Block” button.
Select “Code” from the list of blocks to add a Code Block to your section.
Once done, click on the pen icon in the Code Block to add your code.
Paste the code below in the space provided in the Code Block editor, then click “Done” to save your changes.
<style>
.sqs-block-button-element:hover{
background-color: #39ff14!important
}
</style>
Refresh your page, and you will see that the hover color of your button on that specific section has been changed.
Conclusion:
There are many different ways that you can change the hover color in Squarespace. You can use the Custom CSS panel, Code Injection tool, or the Code Block tool. If you want to change the hover color for all links on your site, you’ll have to use the Custom CSS panel. If you only want to change the hover color for links on a specific page, you’ll need to use a Code Injection tool. For the last option, you can add a Code Block to your section. This will change the hover color of all links in a specific section.
