CTA buttons and attention areas

1) Role of CTA and principles

1. One major step per screen. Primary-CTA should be obvious and unique.
2. Context → action. There is always a brief "what happens next" explanation next for the CTA.
3. Visibility without aggression. Contrast ≥ AA, sufficient size and readable text - instead of flashy effects.
4. Consistency. The same CTAs behave the same on all screens.
5. Security. Risky CTAs are accompanied by confirmation or undo.

2) CTA hierarchy

Primary - key page action ("Place a bet," "Top up," "Confirm"). 1 pc.
Secondary - alternative or auxiliary step ("Details," "Change method").
Tertiary - text/ghost buttons with the lowest visual weight.
Destructive - separate style (color/warning icon) + confirmation/undo.

Rule: if there is more than one "strong" CTA on the screen, a choice without a goal is likely. Redesign the flow.

3) Copywriting CTA

Verb + object, 2-4 words: "Place a bet," "Replenish the balance," "Set a limit."

Specifics: "Output 2,000 ₴" is better than "Send."

Avoid double negations ("Do not cancel") and vague metaphors.

For risky actions - subheading 1 line: "Without confirmation, you can cancel 5 seconds."

4) Dimensions, shape, contrast

Minimum click zone: ≥ 44 × 44 px (touch), ≥ 32 × 32 px (desktop).
Button height: 40-48 px; radius 10-12 px; int. horizontal indents 16-20 px.
Text-to-background contrast: WCAG AA; don't just rely on colour - use an icon/label.
Table digits for amounts/factor: 'font-variant-numeric: tabular-nums;'.

5) States and feedback

Hover/Focus/Active - visible and distinguishable (focus-ring do not hide).

Busy (loading): instant response ≤ 100 ms, spinner/skeleton instead of "silence."

Disabled: not just "gray" - explain why not available (tooltip/inline-hint).
Undo/Confirm: for destructive CTAs - either a confirmation modal or a panel with Undo 5-10 sec.

html
<button class =" btn btn--primary" aria-busy = "false" id = "cta "> Bid </button>
<script>
const cta = document. getElementById('cta');
cta. addEventListener('click', async () => {
cta. setAttribute('aria-busy','true'); cta. disabled = true ;//instant try {
const r = await fetch('/api/bet', {method:'POST', headers:{'Idempotency-Key':crypto. randomUUID()}});
if(!r.ok) throw new Error();
//success toast/navigation
} catch {
//show reason and suggest Retry
} finally {
cta. disabled = false; cta. setAttribute('aria-busy','false');
}
});
</script>

6) Attention zones (desktop) and thumb zones (mobile)

Gaze patterns: F-pattern/Z-pattern, hot spots: top-left (title), top-right (secondary), bottom of screen (finish).

• above the bend for short screens or at the bottom of the form at the line of sight,
• "sticky" panel at the bottom of the mobile (thumb-zone).
• Mobile "thumbs": the lower 1/3 of the screen is more convenient, the right/left edge depends on the dominant hand (by default - the lower center/right).

html
<footer class = "sticky-cta" role = "region" aria-label = "Action">
<div class = "sum"> Bid: 200 ₴</div>
<button class =" btn btn--primary "> Confirm </button>
</footer>

<style>
.sticky-cta{position:sticky; bottom:0; display:flex; gap:12px; align-items:center;
padding:12px 16px; background:var(--bg-elevated); box-shadow:0 -8px 24px rgba(0,0,0,.12)}
.sticky-cta. btn{flex:1}
</style>

7) Placement and indents

Separate primary-CTA from secondary elements with white space (16-24 px).
Do not put two primary next to each other - one will be a "false" choice.
On forms: CTA after the last field; secondary - left/under CTA ("Back," "Cancel").
On cards/tiles: CTA bottom right; for long lists - inline-CTA on each card.

8) Animations and motion patterns

Input/output: 120-180 ms, 'opacity/transform' (without layout-shakes).

Press effect: reduction to 96-98% + shadow → "click is felt."

For "success": short check-microanimation ≤ 400 ms; for reduce-motion - a static icon.
Avoid endless flickering effects (anti-pattern for responsible play).

9) A11y and keyboard

'role = "button" 'is not needed with native' <button> '.
Focus-ring visible; Tab order is logical. Enter/Space activate the CTA.
'aria-busy'at boot; for status, use live-region'role = "status" '.
Button text is available SR; icons - with' aria-hidden =" true"' and not the only carrier of meaning.

10) Metrics and experiments

CTR CTA, Conversion after click, Time-to-Click from appearance to click.

Scroll-depth → click: the proportion of clicks that occurred "above the bend "/" under the bend."

Heatmap zones (desktop/mob); Thumb-reach (mob).
Cancel/Undo rate for risky CTAs.
A/B: text, color/contrast, size, location, sticky panel vs static placement.

11) Design system tokens (example)

json
{
"cta": {
"height": { "sm": 40, "md": 44, "lg": 48 },
"radius": 12,
"px": { "sm": 14, "md": 16, "lg": 20 },
"gap": 8,
"icon": 18,
"focusRing": { "width": 2, "offset": 2 },
"motion": { "pressMs": 90, "hoverMs": 160, "inMs": 160, "outMs": 120 }
},
"sticky": { "enabled": true, "shadow": "0 -8px 24px rgba(0,0,0,.12)" },
"a11y": { "contrastAA": true, "tabularNums": true }
}

css
.btn{height:44px; padding:0 16px; border-radius:12px; display:inline-flex; gap:8px; align-items:center; justify-content:center}
.btn--primary{background:var(--accent); color:var(--on-accent); font-weight:600}
.btn--ghost{background:transparent; border:1px solid var(--border); color:var(--fg)}
.btn[aria-busy="true"]{pointer-events:none; opacity:.85}
.btn:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px}

12) Patterns for iGaming

Make a bet (Primary): show the amount and coefficient side by side; at delay> 3 s - "Waiting for confirmation..." + safe Retry.
Deposit: sticky-CTA bottom mobile screen ("Replenish"), secondary - "Change method"; visible commissions/deadlines nearby.
Cashout: CTA is captured on the match/coupon screen; always shows the current cashout amount; confirmation before execution.
Set limit: CTA not aggressive; nearby - "Will take effect in...." AAA contrast, no flashing.

Tournaments: CTA "Join" on the tournament card + secondary "Rules/Prizes."

13) Antipatterns

Two primary-CTAs nearby (Bet and Buy Bonus) are cognitive competition.
"Gray" disabled without explanation.
Endless attention animations and winking.
A button that changes markup and takes focus away.
The CTA is lower than the large "decor" that goes under the bend.
Icon instead of text (without label) in critical places.

14) Analytics snippets

js function trackCTA(name, meta={}) {
window. dataLayer?.push({ event:'cta_click', name,...meta });
}
//example document. querySelector('#deposit'). addEventListener('click', ()=>{
trackCTA('deposit_click', { placement:'sticky_footer', amount:getAmount() });
});

15) QA checklist

Meaning and hierarchy

• There is exactly one primary-CTA on the screen; secondary ones do not conflict in weight.
• The text of the CTA is clear, without double negations; nearby - what happens next.

Availability

• Focus-ring see; Enter/Space work; 'aria-busy' at boot.
• Text/background contrast ≥ AA; the icon is not the only bearer of meaning.

Behavior

• Instant response ≤ 100 ms; busy-state and Retry on failures.
• For risky ones, confirmation or undo.
• Sticky-CTA sticks correctly on the mobile, does not overlap content.

Accommodation

• CTA in the thumb area (mob) or on the line of sight (desktop).
• Sufficient indentation (16-24 px) from adjacent elements.

Metrics

• CTR, Conversion after click, Time-to-Click, Undo-rate are removed.
• There are text/color/size/location experiments.

16) Documentation in the design system

Компоненты: `ButtonPrimary`, `ButtonSecondary`, `ButtonGhost`, `StickyCTA`, `UndoBar`.
Size/contrast/animation tokens, examples of copywriting.

Patterns: "One primary per screen," "Sticky on a mobile," "Confirm/Undo for risk."

Do/Don't gallery with real screens and heat maps.

Brief Summary

CTA works when it has purpose, place and meaning: one major step, clear text, sufficient contrast, correct location in the attention/thumb zone, and honest feedback. Capture this in the design system, measure behavior - and clicks turn into confident, deliberate actions without mistakes and irritation.