CTA 밴드

CTA band

페이지 하단(또는 섹션 사이)에 배경색을 바꿔 넣는, 단 하나의 행동만 요구하는 전면 띠.

다른 이름: Call-to-action bandClosing banner
···
html
<div class="band">
  <h2>Ready to get started?</h2>
  <p>Join thousands of teams already shipping faster.</p>
  <button class="btn">Start free trial</button>
</div>
css
.band{width:min(92%,760px);height:min(88%,220px);border-radius:16px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(6px,1.6vmin,12px);text-align:center;padding:6%}
.band h2{margin:0;font-size:clamp(13px,3.2vmin,24px);font-weight:800;color:#fff}
.band p{margin:0;font-size:clamp(8px,1.6vmin,12px);color:rgba(255,255,255,.85)}
.btn{margin-top:clamp(4px,1vmin,8px);font-size:clamp(8px,1.6vmin,12px);font-weight:700;padding:.7em 1.6em;
  border-radius:8px;border:none;background:#fff;color:var(--accent);animation:glow 2.2s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}50%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}

페이지 맨 아래, 푸터 바로 위에 가장 흔히 옵니다. 지금까지 스크롤한 방문자에게 마지막으로 한 번 더 행동을 요청하는 자리라서, 헤드라인은 짧고 CTA는 단 하나(많아야 둘)만 둡니다.

배경을 주변 섹션과 다른 색(강조색, 또는 어두운 색)으로 바꿔서 "여기서 끝난다"는 시각적 마침표를 줍니다. 버튼은 배경과 대비가 커야 하고, 페이지 전체에서 가장 튀는 색을 여기 써도 됩니다 — 마지막이니까요.

버튼을 2개 이상, 게다가 비중이 비슷하게 두면 방문자가 고민하다 아무것도 안 누르고 이탈합니다(선택 과부하). 같은 CTA를 페이지 안에 여러 번(히어로+중간+여기) 반복해도 괜찮습니다 — 오히려 어디서든 행동할 수 있게 해주는 게 좋습니다.

언제 쓰나

페이지 어디서든 방문자가 나갈 수 있는 지점, 특히 맨 아래에. 이미 그 위에서 같은 CTA를 여러 번 봤어도 마지막 한 번은 반복하는 게 낫습니다.