CTA copy

행동 유도 문구

Tell people what will happen after they press the button.

···
html
<div class="flow"><button>Submit</button><span>→</span><div class="destination">Unknown next step</div><div class="better"><button>Preview my plan</button><span>→</span><div>Plan preview</div></div></div>
css
.flow{width:84%;max-width:600px;display:flex;align-items:center;gap:clamp(5px,1.5vmin,15px);flex-wrap:wrap;font-family:sans-serif}.flow button{border:0;padding:clamp(8px,2vmin,17px);background:var(--muted);color:var(--bg);font:900 clamp(10px,max(2.4vmin,1vw),22px) sans-serif}.flow span{color:var(--accent);font-size:clamp(15px,3vmin,28px)}.destination,.better div{padding:clamp(8px,2vmin,17px);border:1px solid var(--line);font:700 clamp(10px,max(2.1vmin,1vw),20px) sans-serif}.flow>.destination{color:var(--muted)}.better{display:flex;align-items:center;gap:clamp(5px,1.5vmin,15px);width:100%;margin-top:clamp(7px,2vmin,18px);animation:choose 4s infinite}.better button{background:var(--accent);color:white}.better div{border-color:var(--accent)}@keyframes choose{0%,20%{opacity:.3;transform:translateY(5px)}40%,85%{opacity:1;transform:none}100%{opacity:.3;transform:translateY(5px)}}@media(min-width:700px){body > *{transform:scale(1.4)}.lines p,.branches div,.cards div{cursor:pointer}}

CTA copy is the text on a button or link asking for an action. A clear next step is easier to judge than a vague command such as “Submit.”

The demo changes a button label and its downstream path together. In a live flow, the destination must match the promise on the button.

When to use

Review the label and destination together for signup, download or consultation buttons.

Open as page ↗