The invisible details that separate amateur buttons from professional ones — and how to fix them in 10 minutes

I spent two hours picking the perfect shade of blue for a call-to-action button last year. Used a color contrast checker, made sure it passed WCAG AA standards, even tested it with colorblind simulators.

The button still looked wrong. And worse — nobody was clicking it.

Not because the color was bad. Because I ignored everything else: the padding felt cramped, the text said “Submit” (which tells you nothing), and hovering did nothing.

My designer friend glanced at it for three seconds and said, “Your padding’s wrong, your copy is generic, and you need hover states.”

She was right. Here are the six invisible details that make buttons feel amateurish — and how to fix them.

1. Your Padding Ratio Is Wrong

Most developers slap padding: 12px 24px on a button and call it done. That's the default everyone uses, and it looks exactly like what it is—a default.

Professional buttons use a specific ratio: horizontal padding should be 2.5–3x your vertical padding.

/* Bad: looks cramped */
button { padding: 12px 24px; }

/* Better: breathing room */
button { padding: 12px 36px; }

NOTE: When I mention the 3:1 ratio, I’m talking about padding (inner spacing) inside the button, not margins.
The image is simplified and doesn’t show surrounding elements, which can make this unclear. The core idea is that increasing horizontal padding relative to vertical padding makes buttons feel less cramped and more intentional.

2. Your Button Text Is Killing Conversions

Here’s what I did wrong for three years: my buttons said things like “Submit,” “Click Here,” and “Continue.”

These words are garbage. They tell the user nothing about what happens next.

Bad button copy:

Better button copy (tells you what you get):

The rule: Your button should complete the sentence “I want to ___”

I tested this on a newsletter signup. Changed “Subscribe” to “Send Me Weekly Tips” — signups increased 34%. Same button, same color, just better copy.

Bonus trick: Add “No credit card required” or “Free for 14 days” right below the button. Removes friction instantly.

3. Font Weight Makes Or Breaks Readability

Buttons need heavier text. Period.

The rule: Primary buttons should use font-weight: 500 minimum. Large CTAs should be 600.

Normal weight (400) gets lost against colored backgrounds. I changed a “Start Free Trial” button from weight 400 to 500 and conversion went up 8%. Same color, same size — just bolder text.

4. Button States Are Where You’re Losing Clicks

You styled the default state. But what about hover? Focus? Active?

Minimum viable states:

/* Hover: lift it slightly */
button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Active: press down */
button:active {
  transform: translateY(0);
}/* Disabled: fade it */
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

The interaction should feel physical. Hover = button lifts. Click = button presses. No feedback = users think it’s broken.

5. Border Radius Needs a System

Stop using border-radius: 8px on everything.

Base your radius on button height:

Formula: Radius ≈ height ÷ 5

This keeps buttons proportional. A tiny button with 12px corners looks weird. A huge button with 4px corners looks dated.

6. Size Hierarchy Solves the ‘Everything’s Important’ Problem

If three buttons are the same size, none of them matter.

The hierarchy:

Primary (most important): 48px height, solid color, weight 600 Secondary (alternative): 40px height, outline style, weight 500
Tertiary (optional): 32px height, text-only, weight 500

Real example on a signup page:

Your eye should instantly know what to click. If users hesitate, your hierarchy failed.

7. What You Write AROUND the Button Matters More Than the Button

This is what nobody talks about.

I spent weeks perfecting a “Start Free Trial” button. Conversions stayed flat. Then I added one sentence above it: “Join 12,000+ developers. Cancel anytime.”

Conversions jumped 41%.

Things that increase button clicks when placed near them:

✓ Social proof: “Join 12,000+ users”
✓ Risk removal: “Cancel anytime” or “No credit card required”
✓ Time commitment: “Setup takes 2 minutes”
✓ Benefit reminder: “Get instant access to all features”

The button isn’t an island. Context matters. If someone is scared to click, better colors won’t fix that — better copy will.

The 60-Second Button Audit

Pull up your app. Pick any screen with buttons. Check these:

✓ Padding: Is horizontal padding 2.5–3x vertical?
✓ Copy: Does it tell users what they GET, not what they DO?
✓ Weight: Is text at least 500 weight on colored backgrounds?
✓ States: Do hover/active/focus states exist and feel physical?
✓ Hierarchy: Can someone identify the primary action in 2 seconds?
✓ Context: Is there social proof or risk removal near important buttons?

Fix these and your buttons will immediately feel more professional AND convert better.

When I Fixed These, Conversions Went Up 23%

I redesigned a pricing page last year. Beautiful layout, better copy, social proof — everything. Conversions stayed flat.

Then we fixed the buttons using these rules:

Conversions went up 23% in two weeks. We didn’t touch anything else.

The difference wasn’t dramatic — it was subtle. The buttons just felt more professional, more trustworthy, more clickable.

That’s the thing about buttons. They’re 0.5% of your visual design but handle 100% of your conversions.

If this helped you fix your buttons, follow me for more design and development breakdowns that actually work. I write about the invisible details that separate amateur work from professional — the stuff nobody teaches you in tutorials.

Hit the follow button and drop a comment telling me which button mistake you’ve been making. I respond to everyone.

Powered by Forestry.md