别错过23年万博体育彩票登陆(2023全新爆料)

Squarespace’s built-in style settings for button blocks are somewhat limited. Here are the button settings you can control in the style editor for the Brine template family: 

  • Button style (solid, outline, or raised)

  • Button shape (Square, rounded, or pill)

  • Button color

  • Text color

  • Alternate button color (for display over banner sections)

  • Alternate text color

  • Font

But what if you want a more dynamic and interactive button than Squarespace offers?

If you want to build a high-converting website, it’s important to have calls to action that pop. Adding a hover effect to buttons is a great way to do that. 

In this tutorial, I’ll give you the CSS code you need to add a hover effect to your buttons in Squarespace–with a couple of variations so you can see how the code can be customized to suit your needs.

Ready? Let’s get started!

First, here is the foundational code we’ll be working with for each of the three button sizes: 

Small Buttons

Regular buttons:

.sqs-block-button-element--small {
transition: all 0.3s ease !important;
}
.sqs-block-button-element--small:hover {
}

Buttons over a banner image:

.sqs-alternate-block-style-container .sqs-block-button .sqs-block-button-element--small {
transition: all 0.3s ease !important;
}
.sqs-alternate-block-style-container .sqs-block-button .sqs-block-button-element--small:hover {
}

Medium Buttons

Regular buttons:

.sqs-block-button-element--medium {
transition: all 0.3s ease 0s !important;
}
.sqs-block-button-element--medium:hover {
}

Buttons over a banner image:

.sqs-alternate-block-style-container .sqs-block-button .sqs-block-button-element--medium {
transition: all 0.3s ease !important;
}
.sqs-alternate-block-style-container .sqs-block-button .sqs-block-button-element--medium:hover {
}

Large Buttons

Regular buttons:

.sqs-block-button-element--large {
transition: all 0.3s ease 0s !important;
}
.sqs-block-button-element--large:hover {
}

Buttons over a banner image:

.sqs-alternate-block-style-container .sqs-block-button .sqs-block-button-element--large {
transition: all 0.3s ease !important;
}
.sqs-alternate-block-style-container .sqs-block-button .sqs-block-button-element--large:hover {
}

The transition property I’ve added here smooths the transition between the normal button style and the hover style. Now, all we need to do is add some styling.

You’re going to want to add your CSS to the CSS editor. To find it, go to Design > Custom CSS in your site panel.

For our first example, I’m going to show you how I styled this large button on my own website: 

First, I styled as much as I could in the style settings. Then, I added the following code to the CSS editor:

.large-button-shape-square .sqs-block-button .sqs-block-button-element--large
font-family: 'Oregon-LDO', 'Europa', Sans-Serif;
display: block;
padding-top: 13px;
padding-bottom: 10px;
line-height: 1.5em;
border: 1px solid #a97d6e;
transition: all 0.6s ease 0s;
}
.large-button-shape-square .sqs-block-button .sqs-block-button-element--large:hover
border: 1px solid #a97d6e;
background-color: #f0efea;
color: #a97d6e;
}

Let’s break down the first section of code:

  • If you’re using a custom font on your website, you’ll want to define that in the CSS because it won’t show up under “fonts” in the style editor, like I did here.

  • I added the block value because I want all of my large buttons to be the same width and to fill the width of the container.

  • I also added my own padding and line height to override the default settings.

  • Finally, I added a border. I want the border to appear on hover but I don’t want the button to change size, which is why I added it to both the button and button:hover sections of code.

The second code snippet simply defines the button styling on hover. Here, you can see I’ve changed the background color and text color on hover.

Here’s another example of what you can do using the :hover selector:

 
 

Here’s the CSS code I used to create this button:

.large-button-style-solid .sqs-block-button .sqs-block-button-element--large
border: 1px solid #c6a39d;
box-shadow: 4px 4px 0px 0px #c6a39d;
padding: 10px 20px;
transition: all 0.3s ease 0s;
}
.large-button-style-solid .sqs-block-button .sqs-block-button-element--large:hover
box-shadow: -4px -4px 0px 0px #c6a39d;
opacity: 1 !important;
}

In this example, I’ve added a box shadow to create the unique hover effect. 

You can modify this code with your own brand colors and style preferences, and apply it to any button size you choose.

Have any questions, comments, or want to request a specific Squarespace tutorial? Leave a comment below!

 
 
 
squarespace designKate ScottSquarespace Tutorial, buttons, call to action