Button Styling Options
The button on the back face of your flip box is your call-to-action — it’s what directs visitors to take the next step. Making it look great and on-brand is just as important as the text on it. The Flipbox plugin gives you complete control over every aspect of the button’s appearance.
Where to Find Button Settings
All button styling options are in the Back Face section of the Flipbox settings panel. Look for settings prefixed with “Button” or “Backend Button.”
Button Color Settings
Button Text Color
The color of the text label on the button in its default/resting state. Use a color that contrasts well with the button background.
Button Background Color
The fill color of the button in its default state. Accepts RGBA — use full opacity (alpha = 1) for a solid button, or lower the alpha for a semi-transparent button. A transparent button with a border creates an elegant “ghost button” style.
Button Hover Text Color
The color the button text changes to when a visitor hovers their mouse over the button. Use a contrasting color or the same color at higher contrast.
Button Hover Background Color
The fill color the button transitions to on hover. This micro-interaction provides visual feedback and encourages clicks.
Popular hover effect: If your button is a brand color on rest, set the hover color to a darker shade of that same color. It feels polished and natural.
Button Typography
Font Size
The size of the button text in pixels. 13–16px is typical for buttons. Go no smaller than 12px for readability.
Font Family
Enter a Google Font name to use a custom font on the button. Leave blank to inherit the default font.
Font Weight
Controls boldness. 500–700 is common for buttons — slightly bolder than body text to give the button visual weight and prominence.
Font Style
Normal or Italic. Most buttons use Normal.
Button Spacing
Padding Top
Inner vertical spacing — affects the button’s height. Increase this to make the button taller and more tappable.
Padding Left
Inner horizontal spacing — affects the button’s width. Increase this to make the button wider with more space around the text.
Note: Flipbox uses a single “padding left” to control both left and right padding symmetrically in some styles. If you need more precise control, use the Custom CSS field.
Border Radius
Controls how rounded the button corners are, in pixels:
- 0 – Sharp square corners (flat/modern style)
- 4–8px – Slightly rounded (subtle, professional)
- 20–30px – Heavily rounded (pill-shaped button)
- 999px – Fully rounded pill shape
Button Text Alignment
Aligns the button on the back face:
- Left – Button sits on the left side of the back face
- Center – Button is centered (most common)
- Right – Button sits on the right side
Button Design Examples
| Button Style | Settings |
|---|---|
| Solid brand button | Solid background (brand color), white text, border-radius 6px |
| Ghost / outline button | Transparent background, white text, add border via Custom CSS |
| Pill button | Solid background, white text, border-radius 999px, high padding-left |
| Minimal text link | Transparent background, brand color text, no border-radius, low padding |
Pro Tip: Your button hover colors should always provide clear visual feedback — the button should noticeably change when hovered. If the hover change is too subtle, visitors may not realize the button is clickable.