How to customize the login button for a Squarespace member area

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

When you build a membership site in Squarespace, you’ll get the option to add a “login” link to the top of your site. While that’s great, it’s a super boring text link!

Luckily this tutorial will help you change that. 😎

We’re going to use CSS to add text before the login button, give it a border, and a background AND a hover effect so it really pops!

The codes from this video are listed below.

Here are the codes from this tutorial: Be sure to adjust things like colors and any other values so it looks amazing for your own site design.

This first code adds text before the link itself. Change the word “student” to the word you want to use.

.user-accounts-link .user-accounts-text-link:before {
    content: "Student " !important
}

This code creates the button look by adding a border, background and some padding. Change up the values in bold to make this code uniquely yours!

.user-accounts-link .user-accounts-text-link {
    text-transform: uppercase;
    border: 2px solid #50bdb8;
background: #e5f5f6;
    padding: .5rem 1rem
}

This code creates the hover effect, changing the background color and font color.

.user-accounts-link .user-accounts-text-link:hover {
    background: #000 !important;
    color: #fff !important
}