The short answer
If a button is your primary call to action, make it solid. If it is a secondary or tertiary action, a ghost button is usually fine and often better, because it protects the visual hierarchy of the page. codetheorem.co has covered this at length.
That is the whole debate around ghost buttons vs solid buttons in one sentence. But the interesting part is not the rule, it is the exceptions: hero overlays, dark interfaces, button pairs, mobile screens and accessibility constraints. This guide covers all of them, with the data, the failure modes and a decision framework you can apply to your own pages today.
| Situation | Use this |
|---|---|
| Single main CTA on a landing page | Solid |
| Two choices side by side (Buy / Learn more) | Solid + ghost |
| Hero over a photo or video | Solid (ghost only with a strong scrim) |
| Toolbar, dashboard, filter bar | Ghost |
| Checkout, pricing, form submit | Solid, always |
Definitions: ghost, solid, outlined and text buttons
Before comparing performance, it helps to separate four things that often get lumped together.
- Solid button (filled button): a filled background with contrasting label text. The classic, high affordance CTA.
- Ghost button: a transparent background with a visible border and coloured label. Sometimes called an outline button.
- Outlined button: technically the same construction as a ghost button, but the term is usually used when the button sits on a plain, controlled background rather than an image.
- Text button (link button): no border, no fill, just a label. The lowest visual weight of the four.
When people argue about ghost buttons vs solid buttons, they are really arguing about visual weight and affordance: how obviously the element says “I am clickable, click me now”.
Ghost buttons vs solid buttons: side by side
| Criteria | Solid button | Ghost button |
|---|---|---|
| Visual weight | High | Low to medium |
| Perceived clickability | Immediate | Requires a second of interpretation |
| Attention captured | Strong, wins first fixation | Weaker, often scanned past |
| Behaviour over photos | Stable | Fragile, contrast changes with the image |
| Mobile visibility | Reliable in sunlight and low brightness | Thin borders can disappear |
| Accessibility risk | Low if text contrast is right | Higher: border, label and focus ring all need contrast |
| Hierarchy control | Poor when several are used together | Excellent for secondary actions |
| Aesthetic fit | Functional, sometimes heavy | Minimal, editorial, premium feel |
| Typical CTR impact | Baseline or better | Usually equal or lower as a lone primary CTA |
What the research actually says
The evidence is not unanimous, but it leans in one direction.
- Attention studies repeatedly show solid buttons pulling more visual interest than their ghost equivalents. One widely cited comparison scored a solid CTA at roughly 60% interest versus 38% for the ghost variant on the same layout.
- Click tests run by agencies on real traffic have found ghost buttons taking significantly fewer clicks and being measurably harder to locate during first-click tasks.
- Counter evidence exists. Studies with well contrasted ghost buttons on clean backgrounds show much smaller gaps, sometimes none at all. The problem is rarely the concept of a border, it is the low contrast, thin stroke examples that dominate in the wild.
Read those three points together and the conclusion is not “ghost buttons are bad”. It is: a ghost button removes your safety margin. A solid button forgives poor contrast, a busy background, a small screen and a distracted user. A ghost button does not.
Why ghost buttons lose attention
- Lower affordance. A filled shape reads as an object. An outline reads as a container, and containers are often decorative on the modern web.
- Less contrast area. A solid button contrasts across its whole surface. A ghost button contrasts only along a one or two pixel border and the text.
- No hierarchy signal. When every element on the page is light and minimal, nothing shouts. Users scan and keep scrolling.
- Backgrounds move. On hero images, sliders and video loops, the contrast of a ghost button changes frame by frame.
The accessibility problem nobody mentions
This is where the ghost buttons vs solid buttons debate stops being about taste. Outlined buttons have to satisfy more contrast rules than filled ones, and most implementations fail at least one.
| Requirement | Minimum ratio | Common ghost button failure |
|---|---|---|
| Label text vs background | 4.5:1 (3:1 for large text) | White label on a bright part of a hero photo |
| Border vs background (non text contrast) | 3:1 | Pale grey 1px border on white |
| Focus indicator | 3:1 against adjacent colours | Focus ring the same colour as the border, so it is invisible |
| Target size | 24 x 24 px minimum, 44 px recommended | Slim ghost buttons designed to look light |
Two more traps worth knowing:
- Forced colours and high contrast modes can strip background images and repaint borders. A ghost button that relied on the photo behind it for legibility becomes unreadable or invisible.
- Hover only feedback does not exist on touch. If your ghost button only becomes obviously interactive on hover, mobile users never get that cue.
When a ghost button is the right choice
Ghost buttons are a hierarchy tool, not a decoration. Use them when you want an action to be available but not dominant.
1. Secondary actions next to a solid primary
The strongest, safest pattern on the web: one filled button for the main action, one outlined button beside it for the alternative. “Start free trial” solid, “Book a demo” ghost. The pair reads instantly and the eye knows where to go.
2. Hero overlays with a proper scrim
A ghost button can work on a hero image if you control the background: a dark gradient overlay, a blurred panel, or a fixed solid colour behind the button area. Never place a ghost button directly on an uncontrolled photograph.
3. Dense interfaces and toolbars
In dashboards, tables and admin panels, twelve solid buttons would be visual noise. Ghost and text buttons keep the interface calm while remaining discoverable, because users in a product interface are actively hunting for controls.
4. Cancel, back and low stakes actions
Modals are the textbook case. Solid for confirm, ghost for cancel. It reduces accidental destructive clicks and makes the safe path obvious.
5. Dark mode surfaces
On a controlled dark background, a bright outlined button with a 2px border and a high contrast label performs far better than the same pattern on light backgrounds, because the contrast is stable and predictable.
When ghost buttons quietly kill conversions
These are the cases where switching to solid regularly produces measurable gains.
- A lone primary CTA above the fold. If the button is the only thing you want clicked, do not make users hunt for it.
- Checkout and form submits. Any step where hesitation costs money. Solid, high contrast, wide tap target.
- Two ghost buttons side by side. No hierarchy at all. Users have to read both labels and decide, which adds friction on every visit.
- Pricing tables. Ghost buttons on every plan flatten the page and remove the recommended plan signal.
- Mobile heavy traffic. Outdoor light, dimmed screens and cheap panels destroy thin borders.
- Audiences over 55 or low digital literacy segments. Affordance matters more, not less.
- Sticky bars and floating CTAs. These float over unpredictable content. Fill them.
The quiet part: a ghost button rarely produces an obvious drop that anyone notices. It shaves a few percent off the CTA click rate and nobody attributes the loss to the button style. That is exactly why it survives so long in so many designs.
How to build a ghost button that does not lose you money
- Border 2px minimum, not 1px. Thin strokes vanish on high density screens and low quality displays.
- Border contrast at least 3:1 against whatever sits behind it, in every state.
- Label contrast at least 4.5:1. Do not use a mid grey label on a white card.
- Generous padding. Aim for a 44px minimum touch height. Empty space inside the border is what makes it read as a button.
- Fill it on hover and focus. The most reliable ghost button behaviour is to invert into a solid button on interaction.
- Visible focus ring in a different colour from the border, with an offset.
- Never on raw imagery. Always add a scrim, overlay or solid panel.
- Verb led labels. “See pricing” beats “Learn more”. Weak styling plus a vague label is the worst combination possible.
A minimal, accessible implementation:
.btn-ghost {
background: transparent;
color: #0b3d91;
border: 2px solid #0b3d91;
border-radius: 6px;
padding: 14px 28px;
min-height: 44px;
font-weight: 600;
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
background: #0b3d91;
color: #ffffff;
}
.btn-ghost:focus-visible {
outline: 3px solid #ffb703;
outline-offset: 3px;
}A decision framework you can apply in 30 seconds
- Is this the single most valuable action on the screen? Yes, use solid. Stop here.
- Is there already a solid button in the same visual block? Yes, a ghost button is a good secondary. Keep it to one.
- Can I guarantee the background behind the button? No, use solid.
- Does the border pass 3:1 and the label 4.5:1 in every state? No, fix it or use solid.
- Is more than 60% of traffic on mobile? Yes, bias towards solid for anything revenue related.
- Still unsure? Ship solid, then test the ghost version. Losing to a solid button costs nothing. Losing to a ghost button costs conversions while you wait for data.
How to test ghost buttons vs solid buttons properly
Most “button colour” tests are underpowered and mislead teams for years. If you want a trustworthy answer for your own audience:
- Change one variable. Same label, same size, same position. Only fill versus outline.
- Measure two levels deep. Track button CTR and the downstream conversion. A change that lifts clicks but not sign ups is not a win.
- Segment by device. Ghost versus solid effects are usually larger on mobile.
- Run to a real sample size. For small differences you need thousands of sessions per variant, not a few hundred.
- Add a qualitative layer. A five second first click test will tell you whether people even see the button, which is the actual failure mode.
- Check attention maps. Predictive eye tracking tools give a fast, cheap sanity check before you commit traffic to a test.
Ghost buttons in 2026: still relevant?
Yes, but their role has narrowed. The 2015 era trend of a single thin outlined button floating over a full screen photo is dead for good reason. What survived is the disciplined version: ghost buttons as the second tier of a three tier button system.
Most mature design systems today use exactly that structure:
| Tier | Style | Rule |
|---|---|---|
| Primary | Solid | One per screen section |
| Secondary | Ghost / outlined | One or two, always next to a primary |
| Tertiary | Text button | Minor or reversible actions |
Follow that and the ghost buttons vs solid buttons question mostly answers itself. For the wider picture, see Ghost buttons: Why you should be afraid.
FAQ
Do solid buttons always convert better than ghost buttons?
No, but they are the safer default. Solid buttons win most head to head tests when they are the primary CTA, mainly because they attract attention faster. A well designed, high contrast ghost button on a clean background can perform on par with a solid one.
What is a ghost button exactly?
A ghost button is a button with a transparent background, a visible border and a coloured label. It has lower visual weight than a filled button, which makes it useful for secondary actions.
Are ghost buttons bad for accessibility?
They are not inherently inaccessible, but they have more ways to fail. The border needs 3:1 contrast, the label needs 4.5:1, the focus indicator must be distinguishable and the touch target must be large enough. Many ghost buttons in the wild fail at least one of those.
Can I use two ghost buttons side by side?
Avoid it. Two outlined buttons with equal weight create no hierarchy and force users to read and decide. Pair one solid with one ghost instead.
Should the primary CTA in a hero section ever be a ghost button?
Only if the background behind it is fully controlled, for example a dark scrim or a solid colour block, and the contrast is verified. Over a raw photo or a video loop, use a solid button.
What about ghost buttons in dark mode?
Dark mode is the friendliest environment for ghost buttons because the background is predictable and a light border reads clearly. Keep the border at 2px and invert to a fill on hover and focus.
How much traffic do I need to test button styles?
Button style effects are usually small, in the range of a few percent, so you typically need several thousand sessions per variant. If you cannot reach that, rely on best practice and use solid for primary CTAs.
Key takeaways
- Solid for primary, ghost for secondary. That single rule prevents most conversion damage.
- Ghost buttons remove your margin for error on contrast, backgrounds and screen conditions.
- Accessibility is the real differentiator, not aesthetics. If the border and label do not pass contrast, the debate is over.
- Ghost buttons fail quietly. The loss is small enough to go unnoticed and permanent enough to matter.
- Test with intent, one variable at a time, and measure downstream conversion, not just clicks.
If you only remember one thing: a ghost button should be a deliberate hierarchy decision, never a styling default. There is more on it in Ghost Buttons: UX Disaster or Effective Design.