Button Styles
Most Buy, Join, Subscribe, Book, and Link actions on your Flo page share one set of button rules. You set those defaults in the builder Page tab under Buttons. Fans see the result on your live page at https://myflo.link/yourname.
Button label text (for example Get the guide vs Buy now) is edited per block. Shape, fill, colors, and hover motion come from the Page tab unless a block or link overrides them.
For fonts, templates, and spacing, see Themes and fonts.
Where to edit page buttons
Open the builder
Dashboard → Builder on a desktop browser.
Open the Page tab
In the right sidebar, click Page (deselect any block if needed).
Expand Buttons
Open the Buttons section.
Set colors, shape, fill, and animation
Use the color pickers and option grids, then check the phone preview.
Save and publish
Click Save appearance at the bottom of the sidebar, then Update live — Publishing.
Templates change buttons too
Picking a template under Page → Templates also updates button color, shape, fill, and hover animation. After switching templates, review Buttons if you had custom choices.
What the Page tab controls
| Control | What fans see |
|---|---|
| Button color | Main fill or accent color on primary buttons |
| Button text color | Label color on those buttons |
| Shape | Corner style — rounded, pill, sharp, or squircle |
| Fill | Solid, outline, ghost, or soft background treatment |
| Hover animation | Motion when someone hovers on desktop (none on touch-only taps) |
These apply across conversion blocks that use your page theme. They do not change the separate Flo Pay checkout window — that has its own branding on Pro and Studio (see Checkout branding below).
Shape
Shape controls corner rounding on buttons and matching link rows.
| Option | Look | Best for |
|---|---|---|
| Rounded (default) | Gentle 8px corners | Most pages — balanced and modern |
| Pill | Fully rounded ends | Friendly, casual brands |
| Sharp | Nearly square corners (2px radius) | Bold, editorial, or brutalist look |
| Squircle | Soft 16px corners | Between rounded and pill — smooth but not fully round |
Shape applies to primary and secondary buttons that follow page settings, including stacked link buttons and tier rows on membership blocks.
Fill
Fill (labeled Fill in the Page tab) controls how much color sits behind the button label.
| Option | Look | Best for |
|---|---|---|
| Solid (default) | Full gradient fill using your button color | Main CTAs — highest contrast |
| Outline | Transparent inside with a colored border | Secondary actions on busy backgrounds |
| Ghost | Light transparent fill and subtle border | Low-emphasis buttons that still read as tappable |
| Soft | Tinted wash of your button color (about 22% strength) | Prominent but softer than solid |
On light page templates (for example Apricot Sorbet or Blueish), ghost and soft styles adjust automatically so borders and text stay readable on pale backgrounds.
Hover animation
Hover animation runs when a visitor hovers a button on a desktop browser. Phones and tablets use tap without hover — animation does not repeat on every tap.
| Option | Effect |
|---|---|
| None | No extra motion on hover |
| Lift on hover (default) | Button rises slightly with a stronger shadow |
| Pulse | Gentle pulsing scale on hover |
| Fill | Slight brightening of the button surface on hover |
Reduced motion
Visitors who enable reduced motion in their system settings will not see the pulse animation, even if you selected it.
Outline and ghost fills also get a light background tint on hover so the control still feels interactive.
Colors
Button color
Your main brand accent for primary actions — buy buttons, join buttons, featured membership tiers, and the default accent on link buttons.
Use a color that contrasts with your page background. Dark templates pair well with bright CTAs; light templates often need a saturated or dark button color so labels stay readable.
Button text color
The label color on top of solid and soft fills. On outline buttons, the label usually matches button color (the border color). Ghost buttons use button text color for the label.
Pick white or near-white text on dark button fills, and dark text on light fills. If labels are hard to read, adjust button text color until the preview looks clear.
Which blocks use page button styles
| Block | Uses page shape, fill, colors, animation | Button label text |
|---|---|---|
| Digital download (Sell a Product) | Yes — unless you set a block button color override | Edit modal → button label field |
| Sell a Course | Yes | Edit modal → Button label (defaults like Enroll / Start) |
| Membership | Yes — featured tier uses primary style; other tiers use a softer secondary style | Edit modal → CTA label (default Join) |
| Book a Session | Yes on Featured and Calendar book buttons | Edit modal → CTA button text on those layouts |
| Newsletter (email capture) | Yes on the subscribe button | Content tab → button text |
| Link | Yes — Button layout uses primary style; Card, Grid, and Minimal use a softer row style | Content tab → each link’s label |
Book a Session — Card and Compact
On Card, the on-block label is fixed as Book →. On Compact, fans tap the → arrow. Both still use your page shape, fill, and colors for the control; only the wording is fixed. See Book a Session.
Block-level overrides
Page buttons are the default. Some blocks let you override color or animation without changing the rest of the page.
| Block | Override | Where |
|---|---|---|
| Digital download | Button color for this product block only | Edit modal → presentation / card settings |
| Link | Accent color and hover animation per link | Display tab → Per-link overrides |
| Membership | CTA label only (not shape or fill) | Edit modal |
| Sell a Course | Button label only | Edit modal |
| Book a Session | CTA button text on Featured/Calendar only | Edit modal |
Link overrides are useful when one URL should stand out — for example a bright Accent on a NEW drop link while everything else stays on your page default.
Page-wide animation for links: Default follows the Page tab; or pick None, Lift, Pulse, or Fill for that link only.
Membership: primary vs secondary buttons
On Membership blocks with multiple tiers:
| Tier row | Button style |
|---|---|
| Popular / featured tier | Full primary button — uses Solid (or your chosen fill) with button color |
| Other tiers | Secondary (muted) row — lighter surface, still respects shape and fill family |
You choose which tier is “featured” in the membership Edit window or via your dashboard tier settings.
Checkout branding
Pro plan requiredThe Flo Pay window fans see when they buy a product, course, or paid booking is not styled by the builder Page → Buttons section. It uses separate checkout branding.
| Topic | Detail |
|---|---|
| Where | Settings → Branding (/settings/branding) |
| Plans | Pro and Studio — Creator and Free see an upgrade prompt |
| What you customize | Checkout logo, button colour, button label colour (auto or custom), font, and button corners (Soft, Sharp, or Pill) |
| Page default | Checkout can use page font and use page colour so you do not duplicate work |
Checkout vs page buttons
Checkout corner options (Soft / Sharp / Pill) are independent from page Shape (Rounded / Pill / Sharp / Squircle). A pill-shaped page button can still use Soft corners at checkout, or the reverse.
Checkout font choices in settings use a shorter list (Modern, Editorial, Friendly, Technical, Creative) or Use page font — not the full typography list from the Page tab.
Paid checkout still requires Flo Payments to be active — Flo Payments.
Example setups
| Goal | Suggested approach |
|---|---|
| Strong main CTA | Solid fill, Lift on hover, high-contrast button color |
| Minimal dark page | Ghost or Outline fill, None or Fill animation |
| Playful brand | Pill shape, Pulse on hover, bright button color |
| Many link buttons | Rounded + Solid on Page tab; per-link Accent only for one promo URL |
| Soft membership page | Soft fill on page; let non-featured tiers stay muted automatically |
| Match checkout to page | Pro+ → Settings → Branding → set colours, then Use page colour / Use page font |
Troubleshooting
| Issue | What to try |
|---|---|
| Buttons unchanged on myflo.link | Save appearance, then Update live |
| One product button wrong color | Check Digital download → Edit for a button color override |
| One link looks different | Link block → Display → Per-link overrides → Accent or animation |
| Hover does nothing on phone | Expected — hover animations are for desktop pointers |
| Pulse feels distracting | Switch to Lift on hover or None |
| Text hard to read on button | Adjust button text color or choose a darker button color |
| Outline button hard to see | Use a brighter button color or switch to Soft / Solid |
| Checkout does not match page | Page and checkout are separate — customize Settings → Branding on Pro+ |
| Book button says Book → but I changed CTA | Card / Compact booking layouts use a fixed label — use Featured or Calendar for custom CTA text |
What's next?
- Themes and fonts — templates, typography, layout, and how styles reach blocks
- Page builder overview — full builder tour
- Link button — per-link accent and animation overrides
- Digital download — product block button color override
- Billing & plans — Pro for checkout branding