Buttons & inputs
Configure shared button styles, sizes, and color overrides.
The font, letter spacing, Height, L/R Padding, Border Radius, and Border Width apply to every button. Size Large and Size Small set the height, font size, and padding for the larger and smaller button sizes. Form submit buttons use these styles too, and form fields use the button Height as their minimum height.
Without an override, each button type uses its theme color from Colors with white text. Turn on Primary Button Override, Secondary Button Override, Tertiary Button Override, Gradient One Button Override, or Gradient Two Button Override to set that button's background, text, and hover colors and its background blur. The primary, secondary, and tertiary overrides also set border colors. The secondary, tertiary, and gradient one overrides start turned on.
Check hover and keyboard focus, as well as buttons placed on light and dark backgrounds.
HubSpot CTAs may need the matching module style. See style a HubSpot CTA.
Available settings
| Setting | Type | Notes |
|---|---|---|
| Button Font | font | |
| Button Font Size | number | |
| Button Font Weight | number | |
| Advanced settings | boolean | |
| Button Letter Spacing | number | |
| Uppercase | boolean | |
| Height | number | |
| L/R Padding | number | |
| Border Radius | number | |
| Border Width | number | |
| Size Large | 3 nested settings | |
| Size Small | 3 nested settings | |
| Primary Button Override | boolean | |
| Primary Button Override | 7 nested settings | |
| Secondary Button Override | boolean | |
| Secondary Button Override | 7 nested settings | |
| Tertiary Button Override | boolean | |
| Tertiary Button Override | 7 nested settings | |
| Gradient One Button Override | boolean | |
| Gradient One Button Override | 5 nested settings | |
| Gradient Two Button Override | boolean | |
| Gradient Two Button Override | 5 nested settings |