Una call to action (CTA) es el momento en el que la página deja de comunicar y empieza a pedirle al usuario que haga algo. Es la última fracción de segundo antes de una conversión — un registro, una compra, una descarga, un contacto. Todo lo anterior sirve para preparar ese momento, y el diseño de la CTA puede duplicar o dividir por dos la tasa de conversión de una página con el mismo tráfico y contenido.
Este artículo es una guía práctica para diseñar CTAs que funcionen de verdad: principios de diseño visual, copy, comportamiento, errores frecuentes y cómo comprobar si tu CTA está haciendo su trabajo.
Lo que vas a aprender:
- Qué es una CTA y por qué es más que un botón
- Los 10 principios de diseño de una CTA eficaz
- Cómo escribir el copy de una CTA (UX writing para botones)
- Psicología del color y posicionamiento en la página
- 7 ejemplos reales de CTAs usadas por productos en España y LATAM
- Cómo medir si una CTA está funcionando
Qué es una CTA
Una call to action es cualquier elemento de la interfaz que invita explícitamente al usuario a realizar una acción específica. En la práctica casi siempre es un botón, pero también puede ser un enlace de texto, una card clicable o una sección completa.
Su valor se mide en tasa de conversión: de 100 personas que la ven, cuántas hacen clic. Ese número determina la viabilidad económica de cualquier producto que dependa de la conversión (e-commerce, SaaS, lead generation, newsletters).
La CTA no es un elemento gráfico: es un micro-momento de diseño, copywriting y comportamiento unidos en uno.
Los 10 principios de una CTA eficaz
1. Una CTA primaria por pantalla (máximo dos)
El pecado capital de las landing pages: 5 botones distintos, cada uno pidiendo algo diferente. El usuario no sabe a dónde ir y el resultado es que no va a ningún sitio. Una página, una CTA primaria y, si acaso, una secundaria con prioridad visual claramente menor.
2. Contraste visual máximo
La CTA tiene que dominar visualmente. Color de marca fuerte (no gris anónimo), contraste alto con el fondo, tamaño generoso. La regla práctica: si quito todo de la página y dejo solo la CTA, tiene que seguir siendo reconocible al instante como "el sitio donde hacer clic".
3. Posición previsible
Las CTAs primarias en una landing funcionan mejor cuando están:
- Above the fold, visibles sin hacer scroll
- Al final de una sección, después de una promesa clara
- Al final de la página, para quien llega hasta abajo
El scroll heatmap de cada página sugiere dónde añadir más CTAs: donde los usuarios se paran naturalmente, coloca un prompt.
4. Copy que describe el beneficio, no la acción
"Haz clic aquí" es la peor CTA posible. "Descarga el PDF" es mejor. "Descarga la guía gratuita para principiantes" es aún mejor. El copy tiene que decir qué pasa después del clic, no qué hace el usuario.
Mal ejemplo: "Enviar"
Buen ejemplo: "Empieza gratis"
Mejor: "Empieza gratis — sin tarjeta de crédito"
5. Elimina el copy con fricción
Las palabras que generan ansiedad reducen la conversión: "comprar", "suscribirse", "adquirir ya" pesan más emocionalmente que "probar gratis", "descubrir", "empezar". Cuando el negocio lo permita, prefiere copy de baja presión.
6. Estado hover y feedback de clic
El botón debe reaccionar visualmente al hover y al clic (estado active). Sin feedback visual, un porcentaje de usuarios piensa que el sistema no ha registrado el clic y vuelve a clicar.
7. Tamaño touch-friendly
En móvil, el tamaño mínimo recomendado del touch target es 44×44 pt (Apple Human Interface Guidelines) o 48×48 dp (Material Design). Botones más pequeños producen mis-clics frecuentes y frustración. También es un requisito WCAG 2.2 AA (criterio 2.5.8) y se alinea con la UNE-EN 301 549 y el European Accessibility Act.
8. Los iconos complementan el texto, no lo sustituyen
Un icono al lado del texto acelera el reconocimiento (una flecha → significa "avanzar"). Un icono sin texto es un enigma para el usuario nuevo y rompe el etiquetado para lectores de pantalla.
9. Visibilidad en todos los dispositivos y estados
La CTA tiene que seguir siendo visible y clicable en modo oscuro, móvil en horizontal, con el teclado on-screen abierto, con la barra URL del navegador visible. Estas configuraciones se saltan a menudo en QA.
10. Feedback instantáneo de la siguiente acción
Clicar una CTA y esperar 5 segundos sin ver respuesta multiplica el abandono. Añade un loading state inmediato al clic y usa animación para tranquilizar al usuario de que el sistema responde.
UX writing de una CTA
El texto del botón es con frecuencia el elemento de mayor ROI de todo tu producto. Una sola palabra cambiada puede mover la conversión entre un 5 y un 20%.
Verbos que funcionan
Los verbos en imperativo directo funcionan mejor que los de futuro o condicional:
- Fuertes: Descarga, Prueba, Empieza, Reserva, Únete, Consigue
- Débiles: Ve, Visita, Explora, Conoce, Descubre más sobre
La estructura "verbo + beneficio"
Fórmula clásica que rinde bien:
[Verbo imperativo] + [beneficio específico para el usuario]
- "Descarga la guía SEO 2026"
- "Empieza gratis durante 14 días"
- "Reserva una llamada con un mentor"
Primera persona vs segunda persona
Los tests están divididos. Algunos A/B tests muestran que los botones en primera persona ("Empieza mi prueba gratis") convierten mejor que los de segunda ("Empieza tu prueba gratis") o los imperativos puros ("Empieza prueba gratis"). Depende del contexto: prueba antes de decidir.
Copy con tranquilidad
Añadir una línea de tranquilidad junto al botón baja la ansiedad:
- "Empieza gratis" + microcopy: "Sin tarjeta de crédito"
- "Reserva una demo" + "30 minutos, sin compromiso"
Este microcopy de apoyo puede subir la conversión entre un 10 y un 30% en CTAs de alta fricción.
Psicología del color en las CTAs
El color de un botón primario no sigue una regla universal ("el rojo convierte más") sino un principio: debe contrastar con el resto del diseño y ser coherente con la paleta de marca.
En general:
- Colores cálidos (rojo, naranja, magenta): captan atención, asociados a urgencia y acción
- Colores fríos (azul, verde): comunican confianza y calma, asociados a profesionalidad
- Colores neutros o demasiado suaves: la CTA se pierde, el diseño parece indeciso
No se trata de elegir "el color mágico". Se trata de destacar respecto al resto de la página. Un botón verde en una web con paleta verde contrasta menos que un botón azul en una web blanca y negra. Comprueba también que tu botón cumple el contraste WCAG 2.2 AA (4.5:1 para texto, 3:1 para componentes de UI) — es un requisito legal bajo la UNE-EN 301 549 y el European Accessibility Act, aplicable también en México (NOM) y Colombia (Ley 1618).
7 ejemplos reales de CTAs eficaces
1. Duolingo — "Empieza a aprender"
Simple, imperativa, orientada al beneficio. Botón verde brillante que contrasta con el fondo blanco y la mascota ilustrada. No te pide registrarte: promete que vas a empezar a aprender.
2. Glovo — "Pide ahora"
Dos palabras, amarillo de marca fuerte, posicionado arriba a la derecha de la navbar (siempre visible). No hay fricción del "regístrate" — te lleva directo al valor del producto: pedir comida.
3. Cabify — "Pide tu Cabify"
Copy personal ("tu"), verbo claro y producto en el propio botón. Contraste alto del morado sobre fondo claro. El foco está en la posesión inmediata del servicio, no en el proceso.
4. Notion — "Get Notion free"
Copy que elimina la barrera al instante ("free") y especifica la acción ("get"), no "registrarse". El botón negro plano tiene el máximo contraste en la home blanca.
5. Factorial — "Pruébalo gratis"
Factorial (HR software desde Barcelona) usa "Pruébalo" con pronombre enclítico, mucho más cálido que "Prueba gratis". La adición "gratis" elimina la fricción del coste para un producto B2B.
6. Rappi — "Descarga la app"
Copy directo, imperativo, orientado a la descarga que es el primer paso real del funnel en LATAM. Botón naranja corporativo con contraste alto sobre fondo blanco.
7. Linear — "Start building"
Dos palabras. Sin promesa de "gratis" ni "demo". Es una CTA para un público concreto (developers, equipos tech) que ya sabe qué esperar. Simplicidad de manual.
Errores comunes que matan la conversión
Cinco errores que vemos repetidos:
1. CTAs "Haz clic aquí"
La única razón por la que este copy todavía existe es la inercia. No explica qué hace, no comunica beneficio, no aporta nada al SEO. Bánealo.
2. Demasiadas CTAs compitiendo
"Regístrate / Descubre / Descarga / Contáctanos / Compra" todo junto en la misma vista. El usuario no sabe a dónde ir y no va a ninguna parte.
3. CTA escondida bajo la línea de flotación
Si tu CTA principal necesita scroll para verse, estás perdiendo el 30–50% de los visitantes que nunca bajan del primer viewport.
4. Copy genérico
"Descubre más" es genérico. "Descubre cómo bajamos el coste de adquisición un 40%" es específico. El segundo convierte mucho más.
5. No hacer tests
La CTA es el elemento con más ROI para testear. Si no haces A/B tests en tus CTAs, estás dejando conversiones sobre la mesa.
Cómo medir la eficacia de una CTA
Tres métricas clave:
1. Click-through rate (CTR)
El porcentaje de usuarios que hacen clic en la CTA respecto a los que la ven. Depende de la visibilidad, el copy y el contexto. Un CTR por encima del 3–5% en una landing B2B es bueno; por encima del 10%, excelente.
2. Conversion rate
El porcentaje de visitantes que completan la acción final (compra, registro, descarga). Recoge el efecto combinado de la CTA más toda la página.
3. Bounce rate tras el clic
Si la CTA lleva a los usuarios a una página que luego abandonan, el problema ya no es la CTA sino la brecha entre expectativa y realidad. Mide siempre qué pasa después del clic.
Preguntas frecuentes
¿Cuál es el mejor color para una CTA?
No existe un color universal mejor. Lo que cuenta es el contraste con el resto de la página y la coherencia con la paleta de marca. Un botón naranja en una web azul funciona. Un botón azul en una web azul no.
¿Cuántas CTAs debe tener una página?
Una primaria, y opcionalmente una secundaria claramente diferenciada. Por encima de 2 CTAs simultáneas empiezas a ver caídas en la conversión general. Las landings con muchas CTAs compitiendo convierten peor que las enfocadas.
¿"Comprar ahora" o "Prueba gratis"?
"Prueba gratis" casi siempre gana en las fases tempranas del funnel, porque tiene menos fricción. "Comprar ahora" tiene sentido cuando el usuario está cerca de la decisión y quieres crear urgencia. Depende del momento del customer journey.
¿Las CTAs tienen que ser siempre botones?
No. Pueden ser enlaces de texto para acciones secundarias, cards clicables o secciones enteras. El botón es la forma más explícita, adecuada a las acciones primarias.
¿Cuánto texto debe tener una CTA?
Normalmente entre 2 y 5 palabras. Por debajo de 2, el mensaje es demasiado genérico. Por encima de 5, cuesta leerlo rápido. El microcopy de apoyo bajo el botón puede extender el mensaje sin sobrecargar el botón.
Próximos pasos
La call to action es uno de los puntos más testables y de mayor impacto de cualquier página web. Para seguir:
- Profundiza en los A/B tests para medir el efecto de tus cambios
- Lee la guía de UX writing para escribir mejores copys de botón
- Estudia los principios de psicología Gestalt aplicables al diseño de CTAs
Si tu CTA funciona bien pero la página que la rodea no convierte, el problema suele estar más arriba — en el titular, la promesa o la prueba. Arregla primero el marco y luego pule el botón.
