Styling the Squarespace 'Login' text into a button

Effortlessly transform the plain text on your Squarespace login page into a fully styled button with hover effects and a polished look. Customize colors, shapes, and spacing to perfectly match your website’s design. Follow these simple steps!

---

Step 1: Add Custom CSS in Squarespace

1. Go to Design > Custom CSS in your Squarespace site editor.

2. Paste the following CSS into the editor

3. Save your changes.

.sign-in-button {
  display: inline-block;
  background-color: #16435C !important; /* Button background color */
  color: #fff !important; /* Text color */
  padding: 10px 20px; /* Padding for button */
  border-radius: 5px; /* Rounded corners */
  text-align: center;
  text-decoration: none; /* Remove underline */
  font-size: 1rem; /* Adjust text size */
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

.sign-in-button:hover {
  background-color: #16435C !important; /* Darker background on hover */
  color: #fff !important; /* Text color */
  text-decoration: none; /* Keep underline off */
  cursor: pointer; /* Change cursor to pointer on hover */
}

---

Customise the code

Background Color

• Code Reference: background-color: #007BFF; and .sign-in-button:hover { background-color: #0056b3; }

• Controls the button's main color and its hover state. Use hex, RGB, or named colors.

Text Color

• Code Reference: color: white;

• Adjusts the color of the text inside the button. Choose a contrasting color for readability.

Padding

• Code Reference: padding: 10px 20px;

• Sets the space inside the button around the text. The first value (10px) is for top and bottom spacing, and the second (20px) is for left and right.

Border Radius

• Code Reference: border-radius: 5px;

• Defines how rounded the corners are. Set to 0 for sharp corners or increase the value for a pill-shaped button.

Text Alignment

• Code Reference: text-align: center;

• Centers the text horizontally within the button.

Text Size

• Code Reference: font-size: 1rem;

• Adjusts the size of the text. You can use rem, px, or % to control the scale.

Text Decoration

• Code Reference: text-decoration: none; and .sign-in-button:hover { text-decoration: none; }

• Removes any underline or decoration from the text. You can change this if you want underlines or other effects.

Font Style or Weight

• Code Reference: Not explicitly defined in this code but can be added using font-family or font-weight.

• Allows you to change the font type and boldness.

Button Width

• Code Reference: Not explicitly defined in this code but can be added using width or max-width.

• You can define a fixed or flexible width for uniformity or adaptability.

Hover Background Color

• Code Reference: .sign-in-button:hover { background-color: #0056b3; }

• Changes the button's colour when hovered over, providing visual feedback to the user.

Transition Speed and Effect

• Code Reference: transition: background-color 0.3s ease;

• Creates a smooth effect when the background color changes. Adjust the duration (0.3s) or easing (ease) for different effects.