Adding Buttons and Links to Your Flip Box
Every flip box card can include a call-to-action button on the back face. When visitors flip the card, they see your description text and a button that takes them wherever you want — a product page, a contact form, a blog post, or any URL.
How to Add a Button
- In the Flipbox editor, open the item you want to edit.
- Find the Button Text field — enter the label for your button (e.g., “Learn More”, “Get Started”, “Book a Call”).
- In the Button Link field, enter the full URL you want the button to point to.
- Save the flip box.
Writing Good Button Labels
Your button label should tell the visitor exactly what will happen when they click it. Avoid vague text like “Click Here”. Instead:
- “Learn More”: General interest / informational page
- “View Project”: Portfolio or case study
- “Get a Quote”: Service or pricing inquiry
- “Book a Demo”: SaaS or software product
- “Shop Now”: E-commerce product
- “Meet the Team”: Team member profiles
- “Read the Article”: Blog or resource link
Link Target: Same Tab vs. New Tab
The link target setting controls whether your button link opens in the same browser tab or a new one. This is a global setting that applies to all buttons in the flip box (not per item).
To change it:
- In the Flipbox editor, find the General / Layout Settings section.
- Look for the Link Target (or “Flip Open Tabs”) option.
- Set it to:
- Normal (same tab) – Opens in the current browser tab
- _blank (new tab) – Opens in a new browser tab
Best practice: Use “same tab” for internal links on your own site. Use “new tab” for external links to other websites — this keeps visitors on your site while they explore the linked resource.
What If You Don’t Want a Button?
Simply leave the Button Text and Button Link fields blank. No button will be rendered on the back face. The description text will still display normally.
Button Styling
You can fully style the button appearance from the Back Face settings panel. Key styling options include:
- Button text color
- Button background color
- Hover text color (changes when mouse hovers over button)
- Hover background color
- Font size and family
- Padding (inner spacing)
- Border radius (how rounded the corners are)
- Text alignment
For a complete guide to button styling options, see Button Styling Options.
Linking to Anchors on the Same Page
You can also link to a specific section of the same page using an anchor link. Just enter the anchor as the URL, for example: #contact-section. This works well for single-page designs where the flip box and the target section are on the same page.
Linking to Email or Phone
Flipbox buttons support any valid URL, including:
- Email:
mailto:[email protected] - Phone:
tel:+1234567890
Just enter the full mailto or tel link in the Button Link field.