Buttons

GENERAL ELEMENT COMPONENTS & CSS SNIPPETS

  Select a Squarespace Element to Examine CSS Selectors:

Squarespace Element Description
Button Elements Refers to button block elements, including primary, secondary, and tertiary.

CSS Code Snippets for Customizing Buttons

Add solid box-shadow to buttons

//Start: Add solid box-shadow to buttons
.sqs-button-element--primary, .sqs-button-element--secondary, .sqs-button-element--tertiary {
    box-shadow: 5px 5px #888888;
}
//End: Add solid box-shadow to buttons

Add a “Right” arrow to all buttons using Unicode symbols

This code snippet excludes digital product pricing plan buttons.

//Start: Add a “Right” arrow to all buttons
.sqs-button-element--primary:not(.pricing-plan-pricing-option-button), .sqs-button-element--secondary:not(.pricing-plan-pricing-option-button), .sqs-button-element--tertiary:not(.pricing-plan-pricing-option-button) {
  display: inline-flex !important;
  align-items: center;
}
.sqs-button-element--primary:not(.pricing-plan-pricing-option-button):after, .sqs-button-element--secondary:not(.pricing-plan-pricing-option-button):after, .sqs-button-element--tertiary:not(.pricing-plan-pricing-option-button):after {
  content: "🡒";
  margin-left: 5px;
  font-weight: bold;
  font-size: 1.5em;
}
//End: Add a “Right” arrow to all buttons

Button hover effects

Make a right arrow appear next to button text on hover

 
//Start: Make a right arrow appear next to button text on hover
.sqs-button-element--primary:after, .sqs-button-element--secondary:after, .sqs-button-element--tertiary:after {
  content: "⟶";
  font-weight: bold;
  margin-left: 0;
  opacity: 0;
  max-width: 0px;
  display: inline-block;
  transition: all .3s ease;
}
.sqs-button-element--primary:hover:after, .sqs-button-element--secondary:hover:after, .sqs-button-element--tertiary:hover:after {
  margin-left: 15px;
  opacity: 1;
  max-width: 50px;
}
//End: Make a right arrow appear next to button text on hover

Change background and text color of buttons on hover (outlined buttons already have this effect, but solid buttons do not.

 
//Start: Change background and text color of buttons on hover
.sqs-button-element--primary, .sqs-button-element--secondary, .sqs-button-element--tertiary {
  transition: all .3s ease;
}
.sqs-button-element--primary:hover, .sqs-button-element--secondary:hover, .sqs-button-element--tertiary:hover {
  background: #690750 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}
//End: Change background and text color of buttons on hover
Previous

Summary Blocks
Next

Accordion Blocks