CTA copy test

CTA 문구 테스트

Compare whether button copy makes the next step clear.

···
html
<div class="ctatest"><div class="button" id="button">SUBMIT</div><div class="cursor"></div><div class="next" id="next">NEXT: ACCOUNT SETUP</div></div>
css
.ctatest{position:relative;width:min(65%,320px);text-align:center;font:900 clamp(11px,max(2.1vmin,1vw),18px)/1.1 sans-serif}.button{padding:clamp(12px,3vmin,24px);background:var(--accent);color:white}.cursor{position:absolute;width:0;height:0;border-left:clamp(9px,2vmin,16px) solid var(--fg);border-top:clamp(12px,2.8vmin,22px) solid transparent;top:70%;left:73%;animation:cursor 3.4s infinite}.next{border:2px solid var(--line);padding:8px;margin-top:12px;color:var(--muted);opacity:.25;animation:next 3.4s infinite}@keyframes cursor{0%,20%{transform:translate(28px,35px)}45%,75%{transform:translate(0,0)}100%{transform:translate(28px,35px)}}@keyframes next{0%,45%{opacity:.25}55%,85%{opacity:1;color:var(--accent)}100%{opacity:.25}}
js
const button=document.querySelector('#button');setInterval(()=>{button.textContent=button.textContent==='SUBMIT'?'SEE MY PLAN':'SUBMIT'},1700);

CTA copy is a small promise about what happens after a click. Specific next-step language can set clearer expectations than a generic “Submit.”

The demo changes an ambiguous button into a concrete next step, then moves a cursor to the confirmation state. A copy test should keep color and placement constant.

More clicks do not mean better copy if people abandon the next step. Measure completed actions and confusion after the click.

When to use

Use it when clicks are low or users leave after clicking.

Open as page ↗