Buttons
Buttons guide visitors to take action. Different styles communicate different levels of importance.
Quick Reference - Button Styles
| Style | Look | When to Use |
|---|---|---|
| Gradient | Orange-to-pink background, white text | Primary call-to-action |
| Gradient (Black on Hover) | Gradient with black hover fill | Primary CTA on light backgrounds |
| Gradient Fill | Gradient border, fills on hover | Alternative primary style |
| Primary | Solid pink background | Main actions |
| Secondary | Solid magenta background | Supporting actions |
| White | White background, dark text | On dark backgrounds |
| Black | Black background, white text | Bold, high-contrast |
| Ghost | Transparent with no border | Subtle navigation |
| Ghost (On Black) | Transparent for dark backgrounds | Subtle action on dark |
Quick Reference - Button Sizes
| Size | When to Use |
|---|---|
| Small | Compact spaces, secondary actions |
| Medium | Default, most situations |
| Large | Hero sections, emphasis |
Button Styles Explained
Gradient
What it looks like: Eye-catching orange-to-pink gradient background with white uppercase text. On hover, fills with white and text turns black.
When to use it: Your most important call-to-action on each page. The one thing you want visitors to click.
Example: "Get Started", "Contact Us", "Request Demo"
Gradient (Black on Hover)
What it looks like: Same gradient but fills with black on hover, keeping text white.
When to use it: Primary CTA when you want a darker, more dramatic hover effect.
Example: Hero buttons on image backgrounds.
Gradient Fill
What it looks like: Transparent button with gradient border. The gradient fills the button on hover.
When to use it: Alternative primary style that feels slightly less dominant than solid gradient.
Example: "Learn More", "View Services"
Gradient Fill - Black Text
What it looks like: Same as Gradient Fill but with black text that turns white on hover.
When to use it: On light backgrounds where you want the gradient outline but dark text for readability.
Example: Secondary CTAs on white sections.
Primary
What it looks like: Solid vibrant pink background with white text.
When to use it: Main action buttons when you want a simpler look than gradient.
Example: Form submit buttons, "Add to Cart"
Secondary
What it looks like: Solid magenta-pink background with white text.
When to use it: Supporting actions that are important but not the main focus.
Example: "Learn More" alongside a primary "Contact Us" button
White
What it looks like: White background with dark text. Turns pink on hover.
When to use it: Buttons placed on dark or gradient backgrounds.
Example: Alternative action in a dark hero section
Black
What it looks like: Solid black background with white text. Turns pink on hover.
When to use it: High-contrast situations on light backgrounds.
Example: "Download PDF", important secondary actions
Ghost
What it looks like: Transparent background, no visible border. Text only with subtle hover.
When to use it: Subtle navigation or when you need a clickable element that doesn't look like a traditional button.
Example: "Skip to content", breadcrumb navigation
Ghost (On Black)
What it looks like: Same as Ghost but with white text for dark backgrounds.
When to use it: Subtle actions on dark sections.
Example: Footer navigation links styled as buttons
Button Sizes
Small
What it looks like: Compact button with smaller text and tighter padding.
When to use it: Limited space, toolbars, inline with content, less important actions.
Example: "Edit", "Remove", "Details"
Medium (Default)
What it looks like: Standard button size, balanced proportions.
When to use it: Default choice for most buttons throughout your site.
Example: Most call-to-action buttons
Large
What it looks like: Prominent button with larger text and generous padding.
When to use it: Hero sections, main page CTAs, anywhere you want maximum emphasis.
Example: "Get Your Free Quote" in hero section
Button Placement Tips
Primary vs Secondary Actions
When you have two buttons together:
- Primary action (what you most want visitors to do): Use Gradient or Primary style
- Secondary action (alternative choice): Use Secondary, Ghost, or an outline style
Example:
- Primary: "Start Free Trial" (Gradient)
- Secondary: "Watch Demo" (Gradient Fill)
Buttons on Different Backgrounds
| Background | Recommended Styles |
|---|---|
| White | Gradient, Primary, Secondary, Black |
| Light Gray | Gradient, Primary, Secondary, Black |
| Dark/Black | White, Gradient, Ghost (On Black) |
| Gradient | White, Black |
Button Text Guidelines
- Start with a verb - "Get", "Start", "Download", "Contact"
- Be specific - "Get Free Quote" is better than "Submit"
- Keep it short - 2-4 words is ideal
- Create urgency - "Start Now", "Get Started Today"
Accessibility Notes
- All buttons have clear hover states so visitors know they're clickable
- Button text should describe the action (not just "Click Here")
- Buttons have sufficient color contrast for readability
- Disabled buttons appear grayed out and don't respond to clicks