Buttons section
The Buttons section of Borders shows a row of call to action buttons with their own style, alignment and size.
Applies to: Borders 3.1.0 and later. Added in: Borders 1.0.0. Last checked: 2026-10-13 against Borders 3.1.0.
The Buttons section shows a row of call to action buttons, for example "Shop women" and "Shop men" under a hero. Each button is a block with its own label, link and style; the section sets their alignment and size.
Where to find it: select Add section in the theme editor, then choose Buttons.
Settings
- Alignment places the row of buttons on the left, in the center or on the right.
- Full width lets the row use the whole width of the section on screens 768 px and wider. When it is off, the buttons share half the width there and wrap to a new line when they do not fit.
- Button size sets the size of every button in the section: Regular, Large or Huge.
The section also has a section heading and Section design (Color scheme, Hide section bottom border); see General section styling.
Button blocks
The section starts with two Button blocks. Add more with Add block → Button.
- Button label is the text on the button.
- Button link is the page the button opens.
- Button style chooses Outline or Solid.
- Button hover chooses the color that slides across the button on mouse over. Accent uses the Accent color of the section's color scheme. Invert uses the opposite colors of the button: an outline button fills with the text color, a solid button with the background color.
- Open link in a new window opens the link in a new browser tab.
The corner roundness and border size of the buttons come from Buttons and forms theme settings.
Why do my buttons wrap to a second line?
The row of buttons is limited to half the width of the section on screens 768 px and wider. Turn on Full width to give the row the whole width, or use shorter labels or a smaller Button size. Full width gives the buttons more room; it does not make each button wider.
Can I add buttons to other sections?
Yes. Rich text has a Button block, and Flex columns and Flex grid accept the Button block. Use the Buttons section when you need a row of buttons on its own.
All Buttons settings
Every setting on this page, with its type and default.
Accepts these blocks: Button.
Buttons section: Section heading
Where to find it: Buttons → Section heading
Heading (text box).
Heading tag (dropdown, default: H2): Specify heading level to help search engines index the structure of your page. Options: H1, H2, H3, H4, span.
Hide heading border (checkbox, default: off).
Buttons section: Settings
Where to find it: Buttons → Settings
Alignment (dropdown, default: Center): Places the row of buttons on the left, in the center or on the right of the section. Options: Left, Center, Right.
Full width (checkbox, default: off): Lets the row of buttons use the whole width of the section on screens 768 px and wider; when off, the row uses half the width and buttons wrap to a new line. The buttons themselves do not stretch.
Button size (dropdown, default: Large): Sets the size of every button in the section. Options: Regular, Large, Huge.
Buttons section: Section design
Where to find it: Buttons → Section design
Color scheme (color scheme, default: scheme_1).
Hide section bottom border (checkbox, default: off).
Button block
Where to find it: Buttons → Add block → Button
Button label (text field, default: "Call to action").
Button link (link).
Button style (dropdown, default: Outline): Sets the button look: Outline (a border with the text color) or Solid (filled with the text color). Options: Outline, Solid.
Button hover (dropdown): Sets the color that slides across the button on mouse over: Accent uses the Accent color of the color scheme, Invert fills an outline button with the text color and a solid button with the background color. Options: Invert, Accent.
Open link in a new window (checkbox, default: off): Opens the button link in a new browser tab.
Related pages
- Borders sections: every section you can add.
- Buttons and forms theme settings: corner roundness and border size of all buttons.
- Button block: a button inside Flex columns and Flex grid.
- General section styling: section headings and Section design.