Buttons¶
Flexoraa provides eight reusable button styles, btn-1 to btn-8. Modules that include buttons let you pick one of these styles, so buttons stay consistent across the site.
The eight presets¶
| Style | Default look |
|---|---|
btn-1 | Gradient background (primary gradient), white label |
btn-2 to btn-7 | Solid background, configurable color |
btn-8 | Compact gradient button (smaller text and padding) |
All presets use an 8px corner radius by default.
What you can set per preset¶
In Theme Settings > Buttons, each preset controls:
- Font, size (desktop and mobile), transform, and letter spacing.
- Background style: solid or gradient, with color or gradient choice.
- Corner radius.
- Border (width and color), available on solid backgrounds.
- Padding (vertical and horizontal, desktop and mobile).
- Hover animation.
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.
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 |
Change a button here and every form using that style follows, including the Form module, Banner with Form, and the blog subscribe block.