En la mayoría de las páginas reales, una llamada a la acción es una etiqueta de anclaje con algo de CSS, no un <button>. Convertirlas en auténticos widgets Button —en lugar de dejarlas como texto con estilo— requiere un poco de trabajo de investigación.
La vía rápida: sin preguntas de geometría
Tres formas se convierten en un widget Button de inmediato, sin más comprobaciones: un elemento <button> real; un enlace cuya lista de clases contiene btn o button como nombre de clase exacto; y un enlace que se computa como display: inline-block —que es como se escribe el CSS clásico de botones desde hace quince años, por lo que la mayoría de los enlaces-botón con estilos tradicionales toman esta vía sin saberlo—.
Un rol button o una clase con estilo cta también cuenta a favor del elemento, pero solo como una señal: los elementos que los llevan pasan igualmente por la prueba de geometría que se describe a continuación.
Detección solo a partir del CSS
El caso interesante es un <a> simple que tiene el aspecto de un botón. Como la conversión se realiza sobre una página renderizada real, se pueden inspeccionar los estilos calculados. Un elemento se trata como botón cuando se cumplen todas estas condiciones:
- Es un enlace, un elemento de botón, tiene un rol de botón o es un span/div con cursor de puntero.
- No contiene hijos de nivel de bloque: un botón es contenido de una sola línea, por lo que se excluye cualquier cosa que contenga un párrafo, una lista o un contenedor anidado.
- Su texto es corto (aproximadamente el equivalente a una línea). Un texto largo es prosa, no la etiqueta de un botón.
- Tiene un fondo o un borde, radio de esquina y relleno real.
- Su display es block, inline-block, flex o inline-flex.
Exigir todas estas condiciones a la vez es deliberado. Cualquier señal por sí sola produce falsos positivos: muchos elementos que no son botones tienen fondo y muchos tienen esquinas redondeadas.
Qué se transfiere
El texto de la etiqueta, la URL del enlace, si se abre en una pestaña nueva, la marca nofollow, el color del texto, el color de fondo, el borde y el radio, la sombra de caja, el relleno (como el control Text Padding del propio botón) y todo el conjunto tipográfico.
Qué no se transfiere
- Estados hover. Las reglas CSS de hover no se pueden leer desde un estilo calculado estático, por lo que los colores de hover deben configurarse en Elementor. Esta es la tarea de seguimiento más común.
- Transiciones y animaciones. Vuelve a aplicarlas con los controles propios de Elementor.
- Iconos dentro de botones: puede que haya que volver a elegirlos si el origen usó un SVG en línea en lugar de una clase de icono.
Cuándo un enlace no debería ser un botón
Los enlaces de texto en línea dentro de un párrafo permanecen como parte del contenido del Editor de texto, con su marcado intacto. Eso es correcto: convertir cada enlace en un widget Button destrozaría el texto principal en fragmentos.
Los números concretos
Merece la pena conocer los umbrales, porque explican tanto los aciertos como los fallos. El texto de la etiqueta debe tener 48 caracteres o menos. El radio de esquina debe ser de al menos 3px. El relleno debe ser de al menos 6px en horizontal o 4px en vertical. Y debe haber un fondo o un borde.
Cuarenta y ocho caracteres es aproximadamente el punto en el que una etiqueta deja de ser una etiqueta. «Start your free trial today» tiene 27; una frase de texto principal dentro de un cuadro destacado con borde lo supera con creces. Trazar ahí la línea separa las llamadas a la acción de los párrafos con estilo, que por lo demás comparten todas las demás propiedades.
El mínimo de relleno descarta insignias y etiquetas en línea. Una pequeña píldora de color que dice «Nuevo» tiene fondo, esquinas redondeadas y texto corto: todo lo que tiene un botón excepto relleno real. Exigir 6px en horizontal mantiene esos elementos como texto en lugar de esparcir widgets Button falsos por los encabezados.
El punto ciego de las esquinas cuadradas
El requisito del radio tiene una consecuencia honesta: un botón de esquinas cuadradas que no pasa por la vía rápida no se detecta. Como los enlaces inline-block se convierten incondicionalmente, esto afecta a dos formas específicas: anclajes modernos con display: inline-flex o flex (la forma habitual de centrar un icono junto a una etiqueta) y elementos div o span clicables. Pon a cualquiera de esos elementos esquinas deliberadamente rectas, con radio cero —una elección real en diseños brutalistas y editoriales— y se convertirá como texto con estilo en lugar de como un Button.
La compensación es intencionada. Si se eliminara la condición del radio, se incluirían celdas de tabla, barras de alerta, cuadros destacados de color y cualquier otro rectángulo con fondo y texto corto. Unos pocos botones cuadrados que se pasan por alto son un error mucho más barato que decenas de falsos positivos.
Si tu diseño los usa, la solución es la vía rápida: convierte el elemento en un <button> real o en un enlace con btn o button en su lista de clases —como nombre de clase exacto, ya que solo btn-primary no coincide—. Un solo atributo corrige todos esos botones de la página.
La vía del cursor para div y span
A veces una llamada a la acción no es un enlace en absoluto: un <div> o <span> conectado con JavaScript. Esos solo se consideran si llevan cursor: pointer, que es la única señal fiable de que el autor quería que fuera clicable.
Se convertirán en un widget Button sin enlace, porque no hay ningún href que leer: el destino vivía en un script que se eliminó por seguridad. Rellena el enlace después. Sigue siendo un mejor punto de partida que un div con estilo, ya que obtienes todo el conjunto de controles del Button en lugar de un contenedor al que tienes que volver a dar estilo.
Cuando la suposición es incorrecta, cámbiala
Las heurísticas son heurísticas y no tienes por qué aceptar el resultado. En modo nativo con la estrategia avanzada, ejecuta el análisis de mapeo y abre el panel de mapeo por elemento: cada elemento detectado aparece listado con aquello en lo que se convertirá y con la confianza de esa decisión, y cada uno tiene un desplegable.
Algo que se convirtió en un Button y debería ser un encabezado, o una caja con estilo que debería haber seguido siendo un contenedor: cámbialo ahí y convierte. Esto es más rápido que corregirlo después en Elementor y sobrevive a una nueva conversión, cosa que la edición manual no hace.
Consejos
- Pon a las llamadas a la acción una clase
buttonobtnen el origen; elimina toda ambigüedad y evita la prueba de geometría. - Comprueba el href en los bloques extraídos: si copiaste solo una sección interior, puede que se haya quedado atrás un enlace contenedor.
- Configura los estilos de hover inmediatamente después de la importación, mientras aún recuerdas qué botón es cada uno.
- Si un botón no se convirtió, comprueba primero su radio de esquina: las esquinas cuadradas suelen ser la respuesta.