Una buena llamada a la acción es una etiqueta de botón corta, que empieza con un verbo y nombra lo que obtiene el visitante, más una línea de microtexto que elimina su principal preocupación. Aquí tienes 60 ejemplos originales agrupados por tipo de página (hero, precios, formulario, email y más), cada uno con un diseño de botón y por qué funciona.
Una llamada a la acción (CTA) es el elemento que pide al visitante que dé el siguiente paso: un botón, un enlace o a veces un formulario. La mayoría de las CTA que funcionan comparten tres rasgos:
Todos los ejemplos de abajo se escribieron para esta página; ninguno está copiado de una empresa real. Pon tu propia oferta y conserva una afirmación (un plazo, un tiempo de respuesta, un plan gratuito) solo si es cierta en tu caso.
Busca por palabra ("gratis", "prueba", "reservar") o por tipo de página ("precios", "email").
Ir a: Sección hero · Página de precios · Formulario · Email · Página de producto · Blog y newsletter · Onboarding de la app
El primer botón que ve un visitante. Debe nombrar el primer paso, no todo el recorrido.
Sin tarjeta. Cancela en dos clics.
Por qué funciona: Une la acción con las dos preocupaciones que tiene la gente antes de una prueba: el pago y cómo salir.
Un técnico de tu zona te devuelve la llamada en un día laborable.
Por qué funciona: Dice qué te da lo "gratis" y cuándo va a pasar algo.
Conecta una hoja de cálculo y obtén un panel en minutos.
Por qué funciona: Promete un resultado personal en lugar de una demo genérica.
Tres preguntas. El precio en pantalla, sin llamada comercial.
Por qué funciona: Primera persona ("mi") más una idea clara del esfuerzo.
Responde cinco preguntas y obtén un plan de comidas que puedes imprimir.
Por qué funciona: Nombra un resultado concreto que el visitante puede imaginar.
Busca por código postal, día o nivel.
Por qué funciona: Responde a la pregunta real del visitante (dónde y cuándo) en lugar de "Más información".
Se abre en tu navegador. No hay nada que instalar.
Por qué funciona: Un verbo de poco compromiso y sin la barrera de la instalación.
Calendario en vivo para los próximos 60 días.
Por qué funciona: En las reservas, la disponibilidad es la primera pregunta, así que empieza por ella.
Elige tu equipo y cuánto tiempo tienes.
Por qué funciona: El visitante construye algo; el microtexto muestra que se adapta a él.
Un PDF de 12 páginas. Te lo enviamos por email una sola vez.
Por qué funciona: Fija expectativas exactas sobre lo que llega y con qué frecuencia.
El plan gratuito sigue siendo gratuito. Mejora solo si necesitas más.
Por qué funciona: Responde a la pregunta no formulada: "¿gratis durante cuánto tiempo?".
Quince minutos, cuando a ti te venga bien.
Por qué funciona: Presenta la llamada como ayuda experta y limita el tiempo.
Aquí los visitantes están comparando. Cada botón de plan debe decir qué pasa después con ese plan.
Facturación mensual. Cambia de plan cuando quieras.
Por qué funciona: Usa el nombre del plan para que el clic se sienta como una elección deliberada.
El día 14 eliges un plan, o no pasa nada.
Por qué funciona: Explica el final de la prueba, el momento que la gente teme.
Incluye todo lo de Starter, más puestos de equipo.
Por qué funciona: Verbo corto más el plan, con la diferencia explicada debajo.
Para más de 50 puestos, contratos a medida o facturación.
Por qué funciona: Dice a los visitantes para quién es este botón, así los que no encajan lo pasan de largo.
Paga diez meses, úsalo doce.
Por qué funciona: Convierte un descuento en una cuenta sencilla y comprobable.
Tu trabajo y tus ajustes actuales se conservan.
Por qué funciona: Para los usuarios actuales el miedo es perder su trabajo; el microtexto lo elimina.
Puedes subir de plan sin perder nada.
Por qué funciona: "Empezar con" presenta el plan barato como un primer paso, no como una elección definitiva.
Un solo pago. Incluye las actualizaciones de esta versión.
Por qué funciona: Para un precio de pago único, explica el modelo con claridad junto al botón.
Tabla completa, plan por plan.
Por qué funciona: Una acción secundaria para visitantes que aún no están listos para elegir.
La mayoría de los equipos de 5 a 20 personas empiezan aquí.
Por qué funciona: Una orientación basada en el encaje, no en una popularidad inventada.
El botón de envío es lo último que se lee antes de comprometerse. Di lo que obtiene el visitante, no lo que hace el formulario.
Lo recibirás por email en menos de una hora.
Por qué funciona: Sustituye "Enviar" por el resultado y un plazo.
Siguiente: elige un nombre de usuario.
Por qué funciona: Muestra que queda un paso más para que no parezca una trampa.
De lunes a viernes, de 8am a 6pm. No te telefonearemos fuera de ese horario.
Por qué funciona: Respeta el tiempo del visitante y deja claros los límites.
Te enviaremos por email el enlace de acceso y una invitación de calendario.
Por qué funciona: Sentido de propiedad ("mi plaza") más lo que llega después.
Tu puntuación aparece en la siguiente pantalla.
Por qué funciona: En los cuestionarios, la recompensa es el resultado, así que nómbralo.
Responde una persona real, normalmente el mismo día.
Por qué funciona: Crea una expectativa humana sin prometer un plazo exacto.
Un email cuando lancemos. Nada antes.
Por qué funciona: Una pequeña promesa sobre el volumen de emails reduce el coste de apuntarse.
Lleva unos 10 minutos. Puedes guardar y terminar más tarde.
Por qué funciona: Una duración honesta más una red de seguridad para formularios largos.
Funciona en Google Sheets y Excel.
Por qué funciona: Responde a "¿me servirá a mí?" en el momento del clic.
Cancelación gratuita hasta 24 horas antes.
Por qué funciona: Pone la regla de cancelación donde se toma la decisión.
En el email, el botón compite con todos los demás mensajes de la bandeja de entrada. Sé literal: el lector debe saber exactamente adónde lleva el enlace.
Quedan dos pasos. Unos tres minutos.
Por qué funciona: Enfoque de progreso para un recordatorio de onboarding.
Sigue el envío y cambia la dirección.
Por qué funciona: Enumera lo que el lector puede hacer después de hacer clic.
El código se aplica al pagar. Termina el domingo a medianoche.
Por qué funciona: Un plazo real y con fecha (solo si es real).
Sam ha hecho una pregunta sobre tu anuncio.
Por qué funciona: Nombra a la persona, lo que hace que el mensaje parezca concreto.
Unos seis minutos de lectura.
Por qué funciona: En las newsletters, el coste en tiempo ayuda a decidir si leer ahora o más tarde.
Tu plan termina en la fecha indicada arriba.
Por qué funciona: Vincula la acción a un dato que ya está en el email.
Un toque. Diez segundos.
Por qué funciona: Las peticiones de opinión funcionan mejor cuando el esfuerzo es claramente mínimo.
Tu carrito se guarda durante siete días.
Por qué funciona: Tranquiliza al confirmar que no se ha perdido nada.
Este enlace caduca en 24 horas.
Por qué funciona: Transaccional: verbo sencillo, consecuencia sencilla.
Tu cita se ha movido. Elige cualquier hueco libre.
Por qué funciona: Devuelve el control tras un cambio que el lector no pidió.
Los visitantes están a punto de comprar y buscan motivos para esperar. Elimina esos motivos junto al botón.
Devoluciones gratis en 30 días.
Por qué funciona: La etiqueta estándar que la gente busca con la vista, sin el riesgo principal.
Se envía mañana si lo pides antes de las 2pm.
Por qué funciona: Una hora de corte de envío real da un motivo para actuar hoy.
Usa la guía de tallas o indica tu talla habitual en otras marcas.
Por qué funciona: Resuelve la duda más común en la ropa.
Un email cuando haya existencias.
Por qué funciona: Retiene a un visitante ante un producto agotado en lugar de perderlo.
Previsualiza el grabado antes de pagar.
Por qué funciona: Muestra que el visitante mantiene el control del resultado.
Se guarda en tu cuenta, visible en cualquier dispositivo.
Por qué funciona: Una acción más suave para quien aún no está listo para comprar.
Los lectores vinieron por el contenido, no por un discurso de venta. Ofrece más de lo que ya eligieron.
Un email cada jueves. Date de baja con un clic.
Por qué funciona: Frecuencia y salida explicadas desde el principio.
Los pasos de este artículo en una página imprimible.
Por qué funciona: Un contenido extra ligado directamente a lo que acaban de leer.
Consejos prácticos para pequeñas tiendas, dos veces al mes.
Por qué funciona: Una sola palabra basta cuando el microtexto nombra al público y el ritmo.
Haz una copia en tu propia cuenta. Gratis.
Por qué funciona: Convierte la lectura en acción de inmediato.
Parte 2: fijar precios.
Por qué funciona: Nombra el siguiente tema para que el clic tenga una recompensa clara.
Respondemos las preguntas de los lectores en el próximo número.
Por qué funciona: Invita a participar y dice qué pasará con ello.
Los nuevos usuarios deciden en los primeros minutos si merece la pena aprender a usar el producto. Cada botón debe llevarlos a su primer resultado útil.
Puedes cambiarle el nombre o eliminarlo más tarde.
Por qué funciona: Elimina el miedo a cometer un error permanente.
Desde un archivo CSV o tu cuenta de email.
Por qué funciona: Mete datos reales desde el principio, lo que hace útil la app antes.
Verá lo mismo que ves tú.
Por qué funciona: Explica lo que verá la persona invitada antes de enviarlo.
Puedes hacerlo más tarde en Ajustes.
Por qué funciona: Una salida visible reduce los abandonos en los pasos opcionales.
Tú eliges la hora. Desactivados por defecto.
Por qué funciona: Pide permiso dejando el control al usuario.
Cinco pasos cortos. Ciérralo cuando quieras.
Por qué funciona: Indica la duración para que el recorrido parezca opcional y breve.
| Fórmula | Patrón | Ejemplo |
|---|---|---|
| Verbo + resultado | [Consigue / Ve / Empieza] + [lo que quieren] | Ver mi presupuesto |
| Verbo + "mi" + objeto | La primera persona hace que se sienta propio | Planifica mi primera semana |
| Verbo + objeto + tiempo | Añade cuánto se tarda | Obtén un precio en 2 minutos |
| Verbo + objeto + eliminador de riesgo | El eliminador suele ir en el microtexto | Empieza la prueba gratis / Sin tarjeta |
| Siguiente paso, con nombre | Para flujos de varios pasos | Continuar al envío |
| Pregunta respondida | Refleja lo que vinieron a buscar | Consulta la disponibilidad |
¿Necesitas ideas de titulares para poner encima del botón? Prueba el generador de titulares.
Elige un verbo, un objeto y una línea de microtexto para ver el botón y copiar su HTML.
CSS puro para un botón principal y uno secundario con estados de foco, hover, pulsado y desactivado. O diseña el tuyo con el generador de botones CSS y explora componentes de botón ya hechos.
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font: 600 1rem/1.2 system-ui, sans-serif;
text-decoration: none;
cursor: pointer;
transition: background-color 150ms, transform 100ms;
}
.btn-primary {
background: #1d4ed8;
color: #ffffff;
border: 0;
}
.btn-primary:hover { background: #1e40af; }
.btn-primary:active { transform: translateY(1px); }
.btn:focus-visible {
outline: 3px solid #93c5fd;
outline-offset: 2px;
}
.btn-secondary {
background: transparent;
color: #111827;
border: 2px solid #111827;
}
.btn-secondary:hover { background: #111827; color: #ffffff; }
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}El mismo botón principal con clases de Tailwind:
<a href="/signup" class="inline-flex min-h-[44px] items-center rounded-lg bg-blue-700 px-6 py-3 font-semibold text-white hover:bg-blue-800 active:translate-y-px focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-blue-300">
Empieza tu prueba gratis
</a>Para una sección de cierre completa alrededor del botón, consulta los componentes de sección CTA.
Son cosas que vale la pena probar, no predicciones de lo que ganará. Los resultados dependen de tu público y de tu oferta, así que prueba un cambio cada vez y espera a tener suficientes visitantes antes de decidir (la calculadora de tests A/B te dice si es probable que una diferencia sea real).
Para ver cómo encajan las CTA en el resto de la página, consulta qué es una landing page.
Una llamada a la acción es el botón, el enlace o el formulario que pide al visitante dar el siguiente paso, como empezar una prueba, reservar una llamada o comprar. Una buena CTA nombra el resultado y empieza con un verbo.
Normalmente de dos a cinco. Pon los detalles adicionales, como el precio, el tiempo o lo que pasa después, en una línea corta de microtexto junto al botón o debajo, en lugar de en la etiqueta.
El microtexto es la línea corta junto a una llamada a la acción que elimina una preocupación, por ejemplo "Sin tarjeta" o "Cancelación gratuita hasta 24 horas antes". Solo debe afirmar cosas que sean ciertas para tu oferta.
No hay un único color ideal. Lo que importa es que el botón destaque sobre su fondo y sobre el resto de la página, y que su etiqueta tenga una ratio de contraste de al menos 4.5:1 con el color del botón.
Una página puede repetir la misma acción principal varias veces, por ejemplo en el hero y al final. Evita mostrar dos acciones principales distintas con el mismo peso en la misma vista; convierte la segunda en un botón de contorno o un enlace de texto.
Verbo
Objeto
Microtexto
Color
Copiado
Copiar HTML
Empieza gratis · Sin tarjeta de crédito