How do I add a CTA button to the Squarespace header?

Squarespace 7.1 lets you add a "button" style to header nav items through the design panel, but the default styling is often not prominent enough. You can target the last nav item or a specific link and restyle it.

Use the .header-nav-item:last-child selector or target a specific link by its href to turn it into a bold, contrasting button. Add padding, background color, and border-radius for a standalone button look.

.header-nav-item:last-child a {
  background: #e74c3c;
  color: #fff !important;
  padding: 10px 24px !important;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px;
  transition: background 0.2s ease;
}
.header-nav-item:last-child a:hover {
  background: #c0392b;
}