Button Elements
COMPONENT SELECTOR GUIDE
Global Button Selectors (Selectors That Are the Same Regardless of the Button Type)
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .sqs-block-button | The outer container for the button elements. |
|
| .sqs-block-button-container | The inner container for the button anchor link. |
|
| .sqs-block-button-element | The button anchor link element. |
|
HTML Structure Explanation
The HTML structure of the all button blocks, including it’s descendant elements.
The HTML structure of the all button blocks, including it’s descendant elements.
Primary Buttons
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .sqs-block-button | The outer container for the button elements. |
|
| .sqs-block-button-container | The inner container for the button anchor link. |
|
| .sqs-button-element--primary | The primary button anchor link element. |
|
HTML Structure Explanation
The HTML structure of primary buttons, including it’s descendant elements.
The HTML structure of primary buttons, including it’s descendant elements.
Secondary Buttons
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .sqs-block-button | The outer container for the button elements. |
|
| .sqs-block-button-container | The inner container for the button anchor link. |
|
| .sqs-button-element--secondary | The secondary button anchor link element. |
|
HTML Structure Explanation
The HTML structure of secondary buttons, including it’s descendant elements.
The HTML structure of secondary buttons, including it’s descendant elements.
Tertiary Buttons
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .sqs-block-button | The outer container for the button elements. |
|
| .sqs-block-button-container | The inner container for the button anchor link. |
|
| .sqs-button-element--tertiary | The tertiary button anchor link element. |
|
HTML Structure Explanation
The HTML structure of tertiary buttons, including it’s descendant elements.
The HTML structure of tertiary buttons, including it’s descendant elements.
Unique Button Blocks Using the Block ID
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| #block-yui_3_17_2_1_1690691237911_5006 | Targets a unique Squarespace element using its unique ID attribute. The selector in the left column is just the general form of the block ID, but the characters that come after "#block-" will be different for each element. |
|
HTML Structure Explanation
Every Squarespace block element, such as the Button Block, will have a class name of “.sqs-block”. This element will additionally have an ID attribute that begins with “block-” and ends with a random string of characters as pictured below.
A Button Block element with a class name of “sqs-block” and an id attribute.