Buttons¶
Global settings
Eight reusable button presets, btn-1 to btn-8. Any module with a button lets you pick one, so buttons stay consistent across the site.
The eight presets¶
| Style | Default look |
|---|---|
btn-1 | Solid, primary colour |
btn-2 | Solid, secondary colour |
btn-3 | Outline, 1.5px border |
btn-4 | Outline, 1.5px border |
btn-5 | Gradient, primary to secondary |
btn-6 | Solid |
btn-7 | Link, no background or padding |
btn-8 | Outline, for dark backgrounds |
All presets use an 8px corner radius by default, except btn-7, which has none because it renders as a text link rather than a box.
Two things decide a button: style and size¶
A preset controls how a button looks. How big it is comes from a separate setting, so the two never fight each other.
What a preset controls¶
In Theme Settings › Buttons › Button 1 … 8:
- Font, transform, and letter spacing.
- Background style: solid, gradient, outline, or link.
- The colour or gradient that goes with the chosen style.
- Border width and colour. These appear only for outline, because that is the only style that draws one.
- Corner radius.
- Hover animation.
A preset has no size or padding of its own.
Where size comes from¶
Theme Settings › Buttons › Size holds three tiers, shared by every preset:
| Tier | Font size | Padding |
|---|---|---|
| Small | 14px | 10px / 22px |
| Regular | 16px | 14px / 31px |
| Large | 18px | 18px / 40px |
Default button size picks which tier a button uses when nothing else says otherwise. It ships as Regular.
Why size is not per preset
One size for all eight presets is what keeps two different styles the same height side by side. A button's height is padding + border + line height, and the theme subtracts an outline's border from its padding so an outline and a solid button always come to the same number. Giving each preset its own size would break that the moment two presets disagreed.
Using buttons in a module¶
When a module has a button, set its Style field to one of btn-1 to btn-8. The button then inherits that global preset, so updating the preset restyles every button that uses it.
Most modules also have a Button size field next to it. That overrides the theme default for that module's buttons only, so a hero can run Large while the rest of the page stays Regular. It does not change the preset, so every style in that module stays the same height as the others.
Sizing a CTA button
HubSpot renders CTA embeds itself, so the theme cannot reach inside one. To make a CTA match the buttons around it, open the CTA and add both classes to its own CSS class field: the style, such as btn-3, and the size, such as btn-size-large. Without them the CTA falls back to the theme default size.
No manual alignment on buttons
Button alignment and spacing come from the parent layout (row alignment and gaps), not from the button itself.
Form submit buttons¶
HubSpot renders form submit buttons itself, so they cannot carry a theme button class. Each form style picks one of the eight buttons above instead:
| Form style | Setting |
|---|---|
| Form style 1 | Theme Settings > Form > Form style 1 > Submit button > Button style |
| Form style 2 | Theme Settings > Form > Form style 2 > Submit button > Button style |
| Form style 3 | Theme Settings > Form > Form style 3 > Submit button > Button style |