Buttons

Definition

Buttons are a primary way users interact with a Hibu One Smart Site. They guide visitors toward key actions (e.g., contacting a business, requesting a quote, or, simply, learning more). Button style, size, and text are defined by design standards but must always remain clear, accessible, and consistent.

Design & Accessibility

Use the Contrast Checker in the editor to ensure text meets accessibility standards.
Aim for green check (AA or AAA) compliance.
Strong contrast improves readability, accessibility, and conversions.

Color & Theme Rules

Primary and secondary button colors — including both default and hover states — are linked to theme color placeholders:
18 – Button Primary
19 – Button Secondary
By design, the secondary button’s on/hover colors are the inverse of the primary button for visual balance and consistency.
Font color for all buttons is linked to 2 – White by default.

Adjusting Button Colors

Designers may update button primary, secondary, or font color values only at the theme level — never inline on the page.
Inline color edits prevent future theme-level updates from applying correctly and create maintenance issues.
Any changes should maintain strong color contrast for readability.
When customizing, the secondary button should typically remain the opposite of the primary to preserve hierarchy and consistency.

Borders & Effects

Button borders are off by default.
If a border is needed for design clarity, set the border width to 1px on both primary and secondary buttons.
By default, this adds a 1px white border in both the on and hover states.
Gradients on buttons are strictly prohibited. Flat color designs support clarity, contrast, and consistency across all devices.

Corner Radius (Button Roundness)

Research consistently shows that rounded buttons outperform sharp-cornered ones in click-through rates. Rounded shapes are perceived as more friendly and approachable, encouraging user interaction — whereas sharp edges can feel formal or even intimidating.

Default: Corner radius is set to 10 px.
Increase roundness (e.g., 20–30 px): Only if the brand style calls for softer, friendlier shapes — for example, wellness, childcare, or community-focused businesses.
Remove roundness (0 px): Only if the brand identity or design aesthetic demands a sharper, more structured look — for example, law firms, financial institutions, or industrial services.
Button shadow: Off by default. Use extreme caution if enabling shadows, as they may render poorly on colored or textured backgrounds and can reduce accessibility.

Button Text Best Practices

In most cases, “Learn More” is the right choice. It’s simple, expected, and works well across most copy blocks and callouts.
In some cases, however, a more specific, action-oriented call to action fits better. Examples include:
Menu: “View Menu”
Event: “Register Now”
Estimate: “Request Estimate”
Careers: “View Openings”
Blog: “Read Article”
Download: “Download Guide”
Use the “I want to…” test when deciding: complete the phrase from the visitor’s perspective.
Example: If the button text is “Request Estimate,” the user is essentially saying, “I want to request an estimate.”
This keeps labels user-focused and action-oriented.

< Older Post

Newer Post >