Call to Action — Design Atlas

<div class="stage"> <div class="pane"> <div class="tag">✗</div> <button class="weak">submit</button> <div class="cur" id="c1">➤</div> </div> <div class="pane"> <div class="tag">✓</div> <button class="strong">Get started →</button> <div class="cur" id="c2">➤</div> </div> </div>

.stage{width:94%;height:88%;display:flex;gap:6%;align-items:center} .pane{position:relative;flex:1;height:100%;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;overflow:hidden} .tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)} .weak{border:1px solid var(--line);background:var(--line);color:var(--muted);padding:7px 12px;border-radius:6px;font-size:11px} .strong{border:0;background:var(--accent);color:#fff;padding:11px 20px;border-radius:10px;font-weight:800;font-size:13px;box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 45%,transparent);animation:pulse 1.8s ease-in-out infinite} @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} .cur{position:absolute;font-size:16px;color:var(--fg);transform:rotate(-45deg)} #c1{animation:pass 2.4s ease-in-out infinite} #c2{animation:magnet 2.4s ease-in-out infinite} @keyframes pass{0%{left:14%;top:80%}50%{left:52%;top:48%}100%{left:88%;top:20%}} @keyframes magnet{0%{left:14%;top:80%}70%{left:50%;top:47%}100%{left:50%;top:47%}}

Rooted in marketing and advertising copywriting: the core is an imperative verb ("Start," "Get it free") that names the action concretely. A vague "Submit" or "OK" converts worse than a copy that promises a specific outcome, like "Start your free trial."

Visually it works as a signifier (see: signifier) through contrast colour, adequate size, and surrounding whitespace, and the rule of thumb is one primary CTA per screen — two equally emphasised buttons trigger decision paralysis (see: hicks-law).

Below, the weak CTA blends into grey and the cursor passes right over it; the strong CTA's colour and pulse pull the cursor straight to it.

When to use

Emphasise exactly one primary CTA per screen. Start the label with a verb and promise a concrete outcome ("Complete my order" beats "Submit").