Generador de botones CTA
Diseña un enlace de llamada a la acción (CTA) para una página web, previsualiza sus colores y tamaño, comprueba el contraste del texto y copia o descarga el código HTML y CSS sin errores.
Detalles y estilo de la llamada a la acción (CTA)
Introduce el destino y la etiqueta visible y, a continuación, elige los estilos de botones controlados para tu página web.
Vista previa y código de la CTA
Revisa el enlace visible, el servidor de destino, el contraste, el estilo de enfoque y el código generado antes de publicar.
Cómo crear una llamada a la acción (CTA) en una página web
Utiliza texto visible que indique a los visitantes lo que obtendrán, como “Solicitar un presupuesto” o “Ver las especificaciones del producto”.”
Confirma la URL final, los colores predeterminados y al pasar el cursor, el tamaño del botón, el nombre accesible y el estilo del foco del teclado.
Inserta el código HTML y CSS en tu sitio web y, a continuación, comprueba el funcionamiento del enlace con un teclado, un lector de pantalla, un teléfono móvil y un navegador de ordenador.
Notas sobre el código, el contraste y la accesibilidad
El generador crea un enlace con estilo porque esta llamada a la acción (CTA) abre una URL de destino. El texto del botón, las etiquetas accesibles, los nombres de clase y las URL se validan y se escapan. Solo se aceptan destinos HTTP o HTTPS completos. Al abrir una nueva pestaña, se añade automáticamente `noopener noreferrer`; el atributo «nofollow» solo se añade cuando se selecciona.
El cálculo del contraste se realiza según la fórmula de luminancia relativa de las WCAG 2.2. Los ajustes preestablecidos «compacto» y «estándar» utilizan la referencia de texto AA de 4,5:1. El ajuste preestablecido «grande» utiliza la referencia de texto grande de 3:1 cuando su grosor es de 700 u 800; el texto grande con un grosor de 600 sigue utilizando la relación de 4,5:1. Comprueba tanto los colores predeterminados como los que aparecen al pasar el cursor. Esta prueba abarca únicamente los colores del texto de las llamadas a la acción (CTA), no la visibilidad al estar enfocado, el diseño circundante, el zoom, el tamaño táctil, la finalidad de los enlaces ni la accesibilidad de toda la página.
W3C: Conceptos básicos sobre el contraste (mínimo)Tratamiento de datos: Los datos de tu CTA, la vista previa, el código generado, las copias en el portapapeles y la descarga permanecen en tu navegador. Esta herramienta no sube ni almacena nada de lo que se introduzca aquí.
Convierte los recursos de la campaña en una presencia integrada en el mercado
Descubre los servicios de TradeGoAI para elaborar contenidos de ventas más claros, organizar recursos listos para el mercado y aumentar la visibilidad en los mercados internacionales.
Preguntas frecuentes
¿Este generador crea un enlace o un botón de formulario?
Crea un enlace de anclaje con el estilo de un botón de llamada a la acción. Úsalo cuando al hacer clic en la llamada a la acción se deba abrir otra página. Utiliza un elemento de botón real para acciones como enviar un formulario, abrir un cuadro de diálogo o cambiar la interfaz actual.
¿Qué URL de destino se aceptan?
El destino debe ser una URL completa de tipo HTTP o HTTPS. Se rechazan las URL de JavaScript, de datos, de archivos, relativas y aquellas que contengan credenciales. Revisa el destino final y los parámetros de seguimiento antes de publicar la llamada a la acción.
¿Qué significa el resultado del contraste?
El resultado compara el color del texto seleccionado con los fondos predeterminados y los que aparecen al pasar el cursor por encima. Utiliza la referencia de las WCAG 2.2 AA de 4,5:1 para el texto normal o de 3:1 para el tamaño grande preestablecido con un peso de 700 u 800. Superar esta comprobación de color no garantiza por sí sola que toda la página sea accesible.
¿Cuándo debo añadir una etiqueta de accesibilidad?
Utiliza la etiqueta de accesibilidad opcional solo cuando el texto visible de la llamada a la acción (CTA) no describa claramente el destino. Da prioridad al texto visible y claro. La etiqueta «aria-label» generada sustituye al texto visible como nombre del enlace para las tecnologías de apoyo, por lo que debe describir el mismo propósito.
¿Se sube o se almacena la información de mi CTA?
No. La validación, la vista previa, el cálculo del contraste, la generación del código, la copia y la descarga se realizan en tu navegador. TradeGoAI no recibe ni almacena el contenido introducido en esta herramienta.