How do I add a border to buttons in Squarespace?

Ghost or outline buttons have a border and transparent background. They fill with color on hover for a satisfying interactive effect. Override the Squarespace button styles with a border and transparent background.

The hover transition from outline to filled works best with a background-color transition. Set the text color to match the border, then invert on hover.

/* Outline / ghost button style */
.sqs-block-button-element--medium {
  background-color: transparent !important;
  border: 2px solid #e63946 !important;
  color: #e63946 !important;
  transition: all 0.3s ease !important;
}

/* Fill on hover */
.sqs-block-button-element--medium:hover {
  background-color: #e63946 !important;
  color: #ffffff !important;
}