Customising Squarespace Button Fill and Hover Colours

---

Amending colours

Buttons can be coloured as standard using the Sites Styles in the Squarespace design menu. But fade is the standard hover state.

To add hover states and have more control of the background fill, border and type colour, you can add the following code to adjust the #hex colour of each element.

color: refers to the colour you want button text
background: refers to the colour you want the background of the button
border: refers to the button border colour - you can also adjust the border line width. It is currently 2px.

Things to note

The changes will be across all button block sizes, site wide, (excepting form, newsletter buttons that are not covered by this code).

You need to specify the colour, background, border hex colour once for default, and once for the mouse hover state you want.

Copy and paste the below code into the Custom CSS

/* BUTTON TEXT TWEAK */
.sqs-block-button-element{
color: #000000 !important;
background: #ffffff !important;
border: 2px solid #1ea608 !important;

&:hover {
color: #ffffff!important;
background: #1ea608 !important;
border: 2px solid #1ea608 !important;
}}

For those who are new to this. You can add custom CSS to Squarespace to tweak the layout and add extra functionality. No coding experience needed , just copy and paste into the Custom CSS area which lives under the Design tab.