¿Cómo utilizar Links y botones en el Editor de bloques de Waclis?
El Editor de bloques de Waclis permite crear diferentes tipos de elementos interactivos para dirigir al visitante hacia otra página, iniciar una acción o presentar controles dentro de una composición.
Entre los principales componentes relacionados encontrarás:
Componentes → Base
Link
Html Button
y dentro de la biblioteca de componentes también encontrarás:
Button
Button Group
Button Toolbar
Aunque visualmente algunos pueden parecer iguales, no cumplen exactamente la misma función.
En este tutorial aprenderás:
qué diferencia existe entre Link y Button;
cuándo utilizar un Link;
cuándo utilizar Html Button;
cómo configurar una URL;
qué significa Target;
qué significa Rel;
para qué sirve Download;
cómo modificar el texto de un Button;
qué significa Type;
cómo utilizar Disabled;
cómo identificar si un Button está dentro de un Link;
cómo crear una Card completamente clicable;
por qué deben evitarse los Links anidados;
cómo utilizar Button Group y Button Toolbar;
cómo personalizar Hover y Active;
cómo adaptar Buttons a celular;
cómo clonar correctamente un CTA;
qué revisar después de duplicarlo;
cómo evitar enlaces rotos o destinos incorrectos.
Antes de comenzar: Link y Button no son lo mismo
Esta es la distinción principal.
Un:
Link
sirve para dirigir al visitante hacia un destino.
Por ejemplo:
Ver productos
→ /productos
Un:
Button
es un elemento visual o de interfaz con apariencia de botón.
Según cómo esté construida la sección, puede:
estar dentro de un Link;
formar parte de un Form;
ejecutar una acción determinada;
actuar como control visual.
Un Button puede verse como un enlace
Por ejemplo:
[ VER PRODUCTOS ]
pero internamente la estructura podría ser:
Link
└── Html Button
En ese caso:
Html Button controla elementos como el texto y propiedades del botón;
Link controla el destino.
Este es uno de los conceptos más importantes del tutorial
Supongamos que el Button dice:
VER PRODUCTOS
y enlaza a:
/productos
Después lo clonas para crear:
VER SERVICIOS
Si modificas solamente el texto del Button puedes terminar con:
Texto:
VER SERVICIOS
URL:
PRODUCTOS
El visitante verá:
[ VER SERVICIOS ]
pero al hacer clic abrirá Productos.
Por eso siempre revisa dos cosas
TEXTO
+
DESTINO
¿Qué es un Link?
El componente Link permite crear un enlace.
Lo encontrarás en:
Componentes → Base → Link
También puedes encontrar Links ya incluidos dentro de:
Cards;
Banners;
CTA;
Servicios;
Portafolio;
Contenidos destacados;
imágenes;
iconos;
otras estructuras.
Configuración de Link
Al seleccionar un Link y abrir:
Contenido
encontrarás opciones como:
Url
Rel
Target
Download
Id
Class
¿Qué significa Url?
Url define hacia dónde dirige el enlace.
Por ejemplo:
https://...
o una dirección interna de la Página web.
Ejemplo
Texto:
Ver servicios
Url:
/servicios
Otro ejemplo
Texto:
Contactar
Url:
/contacto
Otro ejemplo
Ver artículo
puede dirigir hacia la página correspondiente del Blog.
Utiliza el destino real
No dejes:
URLs de ejemplo;
enlaces de otra Card;
enlaces de una plantilla;
destinos antiguos.
Enlaces internos
Un Link interno dirige hacia otra página o recurso dentro de tu propia Página web.
Por ejemplo:
Home
→ /home
Contacto
→ /contacto
La estructura exacta de las URLs dependerá de la Página web correspondiente.
No inventes una URL
Si no estás seguro del destino:
abre la página correspondiente;
copia su dirección;
utiliza esa URL.
Enlaces externos
También puedes dirigir hacia otros sitios.
Por ejemplo:
Sitio del fabricante
Perfil de LinkedIn
Documentación externa
Comprueba siempre el destino
Especialmente cuando enlazas a una página externa.
Puede ocurrir que:
haya cambiado;
ya no exista;
redirija a otro contenido.
¿Qué significa Target?
La propiedad Target controla cómo se abre el destino del Link.
Por ejemplo, puede utilizarse para decidir si el enlace:
reemplaza la página actual;
se abre en otro contexto de navegación;
según la opción seleccionada.
¿Cuándo puede ser útil?
Por ejemplo, para determinados Links externos puede resultar conveniente conservar abierta la Página web original.
Mantén un criterio consistente
Evita una sección donde:
Card A
→ abre de una manera
Card B
→ abre de otra
Card C
→ abre de otra
sin una razón.
Para Links similares utiliza una lógica común
Por ejemplo, los tres enlaces hacia perfiles sociales deberían comportarse de manera consistente.
¿Qué significa Rel?
La propiedad Rel permite definir información adicional sobre la relación del enlace con su destino.
En la mayoría de los cambios visuales habituales:
no necesitas modificar Rel.
No agregues valores arbitrarios
Si no sabes por qué necesitas cambiarlo, mantén la configuración existente.
Esto es especialmente importante
No copies propiedades de un ejemplo de Internet simplemente porque aparecen en un fragmento de HTML.
¿Qué significa Download?
Dentro de Link también encontrarás:
Download
Esta opción puede utilizarse cuando el enlace está orientado a una descarga.
Ejemplo conceptual
[ DESCARGAR CATÁLOGO ]
puede enlazar a un archivo.
Pero no actives Download automáticamente
solo porque el texto dice:
Descargar
Primero comprueba:
cuál es el recurso;
cómo debería comportarse;
si el archivo existe.
Un Link hacia una página de descarga
no necesariamente necesita el mismo comportamiento que un Link directo hacia un archivo.
Prueba siempre el resultado mediante Ver página
¿Qué es Html Button?
El componente:
Html Button
se encuentra dentro de:
Componentes → Base
Al seleccionarlo, dentro de Contenido encontrarás propiedades como:
Text
Name
Type
Autofocus
Disabled
Id
Class
¿Qué controla Text?
Text define el texto visible del Button.
Por ejemplo:
Enviar
Contactar
Ver productos
Solicitar presupuesto
Importante
Modificar:
Text
no configura automáticamente:
Url
Si el Button está dentro de un Link
tendrás que seleccionar el Link para modificar el destino.
Utiliza Navigator
Una estructura podría verse:
Link
└── Html Button
Si haces clic sobre el texto
puedes estar seleccionando:
Html Button
Si necesitas cambiar la URL
utiliza:
Seleccionar padre
o:
Navigator
hasta localizar:
Link
Ejemplo práctico
Supongamos:
Link
└── Html Button
└── Ver más
Para modificar
Ver más
→ Conocer servicio
selecciona Html Button.
Para modificar
/servicio-a
→ /servicio-b
selecciona Link.
Dos elementos, dos responsabilidades diferentes
Html Button
→ apariencia / texto / propiedades del botón
Link
→ destino
Esta estructura explica muchos errores habituales
¿Qué significa Name?
Dentro de Html Button puedes encontrar:
Name
Es una propiedad del elemento HTML.
En un Button visual habitual
puede que no necesites modificarla.
Especialmente dentro de formularios
determinadas propiedades pueden formar parte del funcionamiento existente.
No cambies Name solamente por personalización visual
si el Button ya forma parte de una funcionalidad que funciona correctamente.
¿Qué significa Type?
Html Button permite configurar:
Type
Por ejemplo, en la captura del editor se visualiza:
button
¿Por qué debes tener cuidado con Type?
Porque dentro de un Form un Button puede participar en el comportamiento del formulario.
Si el Form ya funciona
no cambies Type sin comprender por qué.
Para cambiar:
color;
texto;
tamaño;
no necesitas modificar Type.
Este es un principio importante
No alteres propiedades funcionales para resolver modificaciones puramente visuales.
¿Qué significa Autofocus?
La configuración incluye:
Autofocus
No necesitas activarlo normalmente
solo para hacer que un Button parezca más importante.
Autofocus no es una herramienta de diseño
No lo utilices como alternativa a:
color;
posición;
jerarquía visual.
¿Qué significa Disabled?
La opción:
Disabled
permite dejar un Button deshabilitado.
Cuando está deshabilitado
el usuario no debería poder interactuar con él normalmente.
¿Cuándo puede utilizarse?
Solo cuando existe una razón funcional.
No utilices Disabled
para mostrar un Button “próximamente” sin explicar el motivo.
Por ejemplo:
[ COMPRAR ]
deshabilitado sin explicación puede hacer pensar que existe un error.
Mejor contextualizar
cuando corresponde.
Un Button deshabilitado no debería parecer completamente operativo
Su estado visual debería acompañar su comportamiento.
No utilices Disabled solamente para cambiar el color
¿Qué es el componente Button?
Dentro de la biblioteca también encontrarás:
Button
Puede utilizarse como parte de diferentes composiciones y estructuras.
Visualmente puede ofrecer una presentación de botón
pero no debes asumir que todas las instancias poseen exactamente la misma estructura interna.
Después de agregarlo
selecciónalo;
abre Contenido;
revisa Navigator;
identifica si existe un Link relacionado;
comprueba qué elemento controla la acción.
No asumas que cualquier Button tiene Url directamente
La composición puede utilizar:
Link
└── Button
o una estructura diferente.
Regla general
Antes de modificar el destino:
busca siempre el Link.
Button vs Html Button
Desde el punto de vista del usuario, ambos pueden parecer:
[ ACCIÓN ]
Pero internamente pueden estar construidos de manera diferente.
Por eso no es recomendable memorizar:
“todos los botones se editan igual”
Utiliza:
Navigator;
Contenido;
jerarquía;
para identificar cada caso.
¿Cómo agregar un Link simple?
Supongamos que quieres crear:
Ver todos los servicios
como texto enlazado.
Paso 1
Abre:
Componentes → Base → Link
Paso 2
Agrégalo dentro de la Section correspondiente.
Paso 3
Modifica el texto visible.
Paso 4
Selecciona el Link.
Paso 5
Configura:
Url
Paso 6
Revisa:
Target
si necesitas modificar su comportamiento.
Paso 7
Guarda.
Paso 8
Utiliza:
Ver página
y prueba el enlace.
Link de texto vs Button
Un Link puede verse como texto:
Ver todos los productos →
Un Button posee mayor protagonismo visual:
[ VER TODOS LOS PRODUCTOS ]
¿Cuál utilizar?
Depende de la jerarquía de la acción.
Acción principal
Puede funcionar mejor como Button.
Por ejemplo:
[ SOLICITAR PRESUPUESTO ]
Acción secundaria
Puede utilizar un Link:
Conocer detalles →
No conviertas todas las acciones en grandes Buttons
Si una página contiene
[ COMPRAR ]
[ VER MÁS ]
[ CONTACTAR ]
[ DESCARGAR ]
[ CONOCER ]
[ VOLVER ]
todos con idéntico protagonismo,
la jerarquía puede perderse.
Define acción principal y secundaria
Por ejemplo:
[ SOLICITAR PRESUPUESTO ]
Ver características
CTA principal
Debe ser fácil de identificar.
CTA secundario
puede ser visualmente más discreto.
Botones y CTA
Un Button suele utilizarse como parte de un Call to Action.
Por ejemplo:
¿Necesitas asesoramiento?
[ CONTACTAR ]
La acción debe corresponder al texto
Evita
[ MÁS INFORMACIÓN ]
si puedes ser más específico.
Ejemplos más claros
Ver productos
Conocer servicio
Solicitar presupuesto
Leer artículo
Ver proyecto
Contactar
El texto debe anticipar qué ocurrirá
“Enviar”
Puede ser adecuado en un Form.
Pero fuera de un Form
[ ENVIAR ]
puede ser ambiguo.
“Continuar”
También puede ser poco claro
si el visitante no sabe a dónde continuará.
“Haz clic aquí”
No describe la acción.
Mejor
Ver catálogo
Texto demasiado largo
Evita Buttons como:
[ HAZ CLIC AQUÍ PARA CONOCER TODOS NUESTROS SERVICIOS ]
Puede simplificarse:
[ VER SERVICIOS ]
Especialmente importante en móvil
Enlace en una Image
Como vimos en el tutorial anterior, una Image puede tener:
Enable link
Pero antes de activarlo
revisa si existe:
Link
└── Image
No crees Links dentro de Links
¿Qué es un Link anidado?
Conceptualmente:
Link A
└── Card
└── Link B
└── Button
Dependiendo de la estructura, esto puede generar HTML incorrecto o comportamiento inesperado.
Ejemplo habitual
Toda la Card ya es clicable:
Link
└── Card
├── Image
├── Heading
├── Paragraph
└── Button visual
Si agregas otro Link alrededor del Button
puedes terminar con una estructura problemática.
Antes de agregar nuevos enlaces
utiliza Navigator.
Card completamente clicable
Este patrón puede ser útil para:
Servicios;
Portafolio;
Contenidos destacados;
Categorías;
artículos.
Conceptualmente
Link
└── Card
├── Image
├── Heading
└── Paragraph
Ventaja
El visitante puede seleccionar toda la Card.
Pero debe quedar visualmente claro
que se trata de un elemento interactivo.
Hover puede ayudar
Por ejemplo:
Card normal
↓
Hover
↓
sombra leve
No exageres
Si toda la Card es clicable
puede no ser necesario agregar otro Button real dentro.
Puedes utilizar una indicación textual:
Ver más →
según el diseño.
Card con Button solamente
Otra estructura:
Card
├── Image
├── Heading
├── Paragraph
└── Link
└── Button
En este caso
solo el CTA final es clicable.
Ambas alternativas pueden ser correctas
La elección depende de la experiencia deseada.
No mezcles ambos patrones sin entender la jerarquía
Imágenes clicables dentro de Cards
Si Image posee un Link y Button otro:
pueden llevar al mismo destino.
Eso puede ser correcto
pero aumenta elementos interactivos.
Comprueba que no haya destinos diferentes inesperadamente.
Ejemplo incoherente
Imagen
→ Producto A
Button “Ver producto”
→ Producto B
Prueba todos los elementos clicables
Botones dentro de formularios
Este es un caso especial.
Un Button dentro de un Form puede tener una función distinta a un CTA de navegación.
Por ejemplo
FORMULARIO
Nombre
Mensaje
[ ENVIAR ]
En este contexto
el Button puede participar del procesamiento del Form.
No lo envuelvas automáticamente en un Link
Tampoco cambies:
Type;
Name;
otros atributos;
sin comprender la lógica existente.
Un Button de envío no necesita necesariamente una Url
Link y Button cumplen funciones diferentes aquí
Botón visual no significa formulario funcional
Recuerda además:
ver un Form y un Button no garantiza por sí solo que exista un mecanismo de envío configurado.
Siempre prueba la funcionalidad mediante Ver página
Button Group
Dentro de la biblioteca encontrarás:
Button Group
Este componente permite organizar varios Buttons relacionados como un grupo visual.
Ejemplo conceptual
[ MENSUAL ][ ANUAL ]
o:
[ OPCIÓN A ][ OPCIÓN B ][ OPCIÓN C ]
Importante
Agrupar Buttons visualmente:
no crea automáticamente una lógica funcional entre ellos.
Por ejemplo
Si creas:
[ MENSUAL ][ ANUAL ]
eso no significa automáticamente que:
cambien precios;
activen un filtro;
modifiquen contenido.
Necesita existir una funcionalidad real
si esperas ese comportamiento.
Button Group puede utilizarse también simplemente para agrupar acciones
Por ejemplo:
[ VER PRODUCTO ][ CONTACTAR ]
Pero pregunta si ambas acciones realmente necesitan el mismo peso visual.
Dos acciones principales pueden competir
Button Group debe reunir acciones relacionadas
Evita:
[ CONTACTAR ][ INSTAGRAM ][ POLÍTICA DE PRIVACIDAD ][ HOME ]
solo porque caben juntas.
Button Toolbar
También encontrarás:
Button Toolbar
Puede utilizarse para organizar grupos de controles relacionados en una estructura más amplia.
Conceptualmente
Toolbar
├── Button Group A
│ ├── Button
│ └── Button
└── Button Group B
├── Button
└── Button
Es un componente de interfaz más estructurado
No debería utilizarse únicamente para poner:
dos CTA
uno al lado del otro.
Para un CTA simple
una estructura más sencilla suele ser preferible.
No agregues Toolbar por complejidad visual
Utilízala cuando exista un conjunto real de controles.
Button Group y Toolbar no crean funcionalidad automáticamente
Esto merece repetirse.
Por ejemplo
[ FILTRAR ]
[ ORDENAR ]
solo funcionarán si existe la lógica correspondiente.
No presentes controles falsos
Un Button que no hace nada
es peor que no mostrarlo.
Buttons y navegación
Puedes utilizar Button o Link para dirigir hacia:
página interna;
Contacto;
Productos;
Servicio;
Blog;
archivo;
página externa.
Pero el texto debería corresponder al destino
Ejemplo
[ VER EQUIPO ]
→ Equipo
No:
[ VER EQUIPO ]
→ Contacto
Esto parece obvio
pero ocurre frecuentemente después de clonar.
Clonar un CTA
Supongamos que tienes:
[ VER PRODUCTOS ]
y quieres crear:
[ VER SERVICIOS ]
Procedimiento recomendado
abre Navigator;
identifica la unidad completa;
verifica si está compuesta por Link + Button;
clona la unidad correcta;
cambia Text;
cambia Url;
revisa Target;
revisa ID;
prueba el destino.
Conceptualmente
CTA
└── Link
└── Button
o:
Link
└── Button
según la estructura.
No clones solo Button
si necesitas también un nuevo destino.
Error típico
Original:
Ver productos
→ /productos
Copia:
Ver servicios
→ /productos
Segundo error típico
Original:
id="cta-productos"
Copia:
id="cta-productos"
Debes mantener IDs únicos
Classes sí pueden repetirse
Por ejemplo:
cta-primary
puede utilizarse en varios Buttons si quieres que compartan estilo.
Esta es una buena aplicación de Classes
Ejemplo
Button A
class="cta-primary"
Button B
class="cta-primary"
Así ambos pueden compartir
Background;
Text Color;
Border;
Hover;
Padding.
Linked styles
Si varios Buttons comparten una Class:
Waclis puede mostrar el aviso de Linked styles.
Esto puede ser correcto
Por ejemplo:
Solicitar presupuesto
Contactar
Comenzar
pueden compartir:
btn-principal
si todos son CTA principales dentro de distintas secciones.
Pero cuidado con la jerarquía
No significa que todos los Buttons del sitio necesiten ser iguales.
Puedes definir diferentes Classes
Por ejemplo:
btn-primary-custom
btn-secondary-custom
btn-link-custom
Primario
Mayor protagonismo.
Secundario
Menor.
No necesitas crear diez variantes
Mantén un sistema simple.
ID para un Button único
Puedes utilizar:
id="cta-contacto-home"
si necesitas una excepción específica.
Pero no utilices IDs diferentes
para aplicar exactamente el mismo estilo a 20 Buttons.
Utiliza Class.
Personalizar Buttons desde Estilo
Puedes trabajar con:
Display;
Typography;
Size;
Margin;
Padding;
Border;
Border radius;
Background;
Text Color.
Por ejemplo
puedes modificar:
Background Color
También:
Text Color
Padding
controla el espacio interior.
Por ejemplo:
[ CONTACTAR ]
Muy poco Padding
[CONTACTAR]
puede hacer que el Button se vea apretado.
Demasiado
[ CONTACTAR ]
puede generar un Button desproporcionado.
Border radius
Puede utilizarse para:
bordes apenas redondeados;
botones redondeados;
estilo tipo píldora.
Mantén consistencia con la identidad visual
No utilices un Border radius diferente en cada CTA
sin una razón.
Border
Puede utilizarse para Buttons secundarios.
Por ejemplo:
[ CONTACTAR ]
con fondo transparente y borde.
Esto puede ayudar a diferenciar:
PRIMARIO
de:
SECUNDARIO
Ejemplo
[ COMENZAR ]
Conocer más
O:
[ COMENZAR ] [ VER DETALLES ]
con estilos diferentes.
Hover
Dentro de Estilo puedes seleccionar el estado:
hover
Esto permite personalizar cómo se ve el elemento al pasar el mouse.
Por ejemplo
Estado normal:
fondo oscuro
texto blanco
Hover:
fondo ligeramente diferente
El cambio debe ser perceptible
pero no necesariamente extremo.
Evita
normal → botón azul
hover → gira 180°, aumenta 50 %, cambia a amarillo
si no corresponde a la identidad.
Hover debería confirmar que es interactivo
Active
También existe el estado:
active
Puede utilizarse para personalizar el estado mientras el elemento está siendo activado.
No confundas Active con:
“este es el plan actualmente seleccionado”
salvo que exista una lógica funcional real que gestione ese estado.
El selector de estado del editor
permite definir estilos CSS.
No crea por sí solo una aplicación interactiva.
nth-of-type(2n)
También aparece como estado disponible.
No necesitas utilizarlo para Buttons habituales.
No cambies estados que no comprendes
solo porque aparecen en el selector.
Hover y Linked styles
Supongamos que todos los Buttons comparten:
cta-primary
Si modificas Hover
puede aplicarse a todos.
Eso suele ser deseable
para mantener coherencia.
Si solo uno necesita un Hover diferente
utiliza una Class adicional.
Button responsive
Un Button que se ve bien en desktop puede presentar problemas en celular.
Ejemplo
[ SOLICITAR INFORMACIÓN SOBRE NUESTROS SERVICIOS CORPORATIVOS ]
puede quedar demasiado largo.
Puedes simplificarlo:
[ SOLICITAR INFORMACIÓN ]
No reduzcas Font size excesivamente
para hacer entrar una frase demasiado larga.
Primero revisa el texto.
Buttons en una fila
Desktop:
[ CONTACTAR ] [ VER MÁS ]
puede funcionar.
Mobile
puede requerir:
[ CONTACTAR ]
[ VER MÁS ]
No mantengas dos Buttons demasiado estrechos
si el texto empieza a cortarse.
Button Group y responsive
Un grupo:
[ A ][ B ][ C ]
puede necesitar:
Wrap;
apilado;
mayor ancho;
en celular.
No reduzcas los controles hasta volverlos difíciles de seleccionar.
Área clicable
El Button debería tener suficiente:
Padding;
tamaño;
separación.
Especialmente en dispositivos táctiles
Buttons pegados
Evita:
[SI][NO]
sin espacio suficiente,
salvo que Button Group esté diseñado específicamente para ese comportamiento.
CTA de ancho completo en móvil
En algunos diseños puede resultar útil:
[ CONTACTAR ]
ocupando gran parte del contenedor.
No es obligatorio
Depende de:
jerarquía;
diseño;
longitud.
No hagas todos los Buttons 100 % de ancho
si no aporta.
Display
Puede influir en cómo ocupa espacio el elemento.
No cambies Display indiscriminadamente.
Por ejemplo
cambiar un elemento de:
inline
a:
block
puede modificar su comportamiento y ancho.
Si necesitas un Button centrado
no necesariamente debes convertirlo en bloque.
Puedes revisar:
contenedor;
alineación;
Display.
Centrar Button
Una estructura adecuada puede ser:
Container
└── CTA wrapper
└── Button
Evita:
margin-left: 437px
No utilices valores rígidos para centrar
Utiliza estructura y alineación.
Buttons dentro de Grid
Ejemplo:
[ TEXT ][ BUTTON ]
puede construirse mediante Grid Row.
Mobile:
TEXT
BUTTON
No utilices Position absolute
si puede resolverse mediante Grid.
Position
Dentro de Estilo también puedes encontrar:
Static;
otras opciones de Position;
Top;
Left;
Bottom;
Right.
Para un CTA normal
lo más habitual es no necesitar posiciones manuales complejas.
Si utilizas Position para colocar un Button encima de una imagen
comprueba especialmente responsive.
Puede ser mejor utilizar una composición:
Banner;
Overlay;
Card;
diseñada para eso.
Botón sobre imagen
Si tienes:
[ IMAGEN ]
[ VER PRODUCTO ]
no necesariamente necesita estar literalmente encima.
Mantenerlo debajo suele ser más robusto.
Si el diseño exige Overlay
utiliza una estructura preparada.
Buttons y contraste
El CTA debe ser legible.
Evita:
texto gris claro
sobre
fondo gris
También comprueba Hover
Puede ocurrir:
normal
→ texto blanco
hover
→ fondo blanco
texto blanco
Resultado:
el texto desaparece.
Revisa ambos estados
Border y Hover
Si el Button secundario utiliza:
fondo transparente
borde oscuro
texto oscuro
Hover podría utilizar:
fondo oscuro
texto claro
Esto genera una transición comprensible.
Pero no es una regla obligatoria
Disabled y contraste
Un Button Disabled puede verse menos destacado.
Pero debe seguir siendo reconocible.
No lo hagas tan tenue
que parezca un error de renderizado.
Iconos dentro de Buttons
Puedes combinar:
Font Icon;
Svg Icon;
con un Button en una composición personalizada.
Por ejemplo
[ Descargar ↓ ]
Mantén el icono secundario al texto.
No uses un icono ambiguo
sin texto cuando la acción no es evidente.
Ejemplo
[ ↓ ]
puede significar:
descargar;
desplazar;
abrir;
expandir.
En acciones importantes agrega contexto.
Buttons únicamente con icono
Pueden funcionar para controles reconocibles.
Por ejemplo, ciertas interfaces usan:
siguiente;
anterior;
cerrar.
Pero comprueba que el usuario pueda interpretar la acción.
Social Buttons
Para perfiles sociales:
puedes utilizar:
[ LinkedIn ]
o:
[ icono ]
Revisa siempre:
icono
+
Url
Igual que vimos en Redes sociales.
Enlaces de teléfono
Puedes utilizar Links cuando quieras crear accesos relacionados con un número telefónico, siempre que la URL esté correctamente configurada para ese propósito.
Lo mismo puede aplicar a email
Pero no inventes formatos
si no sabes cómo debe configurarse.
Prueba siempre en el frontend.
Enlaces a WhatsApp u otros servicios externos
Utiliza el destino real correspondiente.
No confíes solamente en que la URL “parece correcta”.
Pruébala.
Descargas
Ejemplo:
[ DESCARGAR CATÁLOGO ]
Comprueba:
archivo correcto;
URL válida;
comportamiento;
versión actual.
Un catálogo antiguo
puede seguir descargándose aunque el Button se vea actualizado.
Revisa el recurso final.
Enlaces temporales
Una campaña puede utilizar:
[ VER PROMOCIÓN ]
Cuando finaliza:
cambia el destino;
elimina el CTA;
actualiza la Card.
No dejes un Button hacia una promoción vencida.
Links rotos
Los enlaces necesitan mantenimiento.
Pueden romperse porque:
página eliminada;
slug cambiado;
recurso movido;
sitio externo desapareció.
Revisa periódicamente los CTA principales.
Blank Buttons
No dejes:
[ BUTTON ]
sin texto real.
Tampoco:
[ # ]
como Link provisional al publicar.
Ejemplos de plantilla
Antes de guardar busca:
Learn more
Read more
Click here
Button
y reemplázalos cuando corresponda.
Idioma consistente
Si la Página web está en español:
evita mezclar:
Ver producto
Learn more
Contact us
salvo que exista una razón.
Mantén español neutro según el contenido del sitio.
Mayúsculas
Puedes utilizar visualmente:
CONTACTAR
Pero no es obligatorio escribir el contenido completo en mayúsculas.
El estilo visual puede gestionarse mediante CSS cuando corresponda.
No conviertas textos demasiado largos en mayúsculas
porque pueden ser más difíciles de recorrer.
Dos CTA juntos
Ejemplo:
[ COMENZAR ] [ VER DEMO ]
Pregunta
¿Cuál es principal?
Puedes diferenciar:
[ COMENZAR ]
Ver demo
o estilos:
Button sólido
+
Button secundario
No hagas ambos idénticos si uno debería priorizarse.
Tres CTA
Puede ser demasiado.
Por ejemplo:
[ COMPRAR ]
[ CONTACTAR ]
[ VER MÁS ]
Revisa el recorrido.
Tal vez:
[ COMPRAR ]
¿Necesitas ayuda? Contactar
sea más claro.
Button Group no resuelve automáticamente la jerarquía
Agrupar no significa priorizar.
CTA repetidos en una página larga
Puede ser correcto repetir la acción principal.
Por ejemplo:
Hero
→ [ SOLICITAR DEMO ]
y después:
Final de página
→ [ SOLICITAR DEMO ]
Esto puede reducir la necesidad de volver arriba.
Pero mantén:
mismo texto;
mismo destino;
si representan la misma acción.
No utilices:
Solicitar demo
arriba y:
Comenzar
abajo hacia el mismo destino
si puede generar dudas sobre si son acciones distintas.
CTA en Banners
Un Banner puede contener:
Título
Descripción
Button
Recuerda revisar el Link del Button después de clonar el Banner.
CTA en Servicios
Cada Card puede tener:
Conocer servicio
O un CTA general:
Ver todos los servicios
CTA en Portafolio
Puede ser:
Ver proyecto
CTA en Contenidos destacados
Puede variar:
Leer artículo
Ver producto
Conocer servicio
CTA en Tabla de precios
Puede ser:
Elegir plan
según el proceso real.
No utilices CTA que prometan una acción inexistente
Por ejemplo
Comprar ahora
si el siguiente paso es solamente Contacto.
Mejor:
Consultar
o el texto apropiado.
Button y accesibilidad
El Button debe ser reconocible.
No elimines todos los indicadores visuales de foco
mediante CSS indiscriminadamente.
Especialmente si personalizas:
outline: none;
No deberías eliminar indicadores útiles
sin proporcionar una alternativa adecuada.
Links de texto
También necesitan distinguirse.
Si eliminas:
subrayado;
color;
Hover;
pueden parecer texto normal.
No dependas solo de posición
para comunicar que algo es clicable.
Hover no existe de la misma manera en móvil
El estado normal ya debe comunicar interactividad.
Cursores
No necesitas personalizar cursor para cada elemento
si el comportamiento natural ya funciona correctamente.
No conviertas un elemento no clicable en algo que visualmente parece Button.
Ejemplo incorrecto
[ PRÓXIMAMENTE ]
estilizado igual que un CTA activo,
pero sin interacción.
Puede utilizarse como Badge o texto
si no es una acción.
Button vs Badge
Dentro de componentes también existe:
Badge
Badge sirve para información breve:
NUEVO
Button:
VER PRODUCTO
No utilices Button para etiquetas que no tienen acción.
Del mismo modo
no utilices Badge para una acción.
CSS personalizado para Buttons
En personalizaciones avanzadas puedes utilizar Classes.
Por ejemplo:
cta-primary
cta-secondary
CSS conceptual
.mi-seccion .cta-primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
border-radius: 8px;
}
Hover
.mi-seccion .cta-primary {
transition: transform .2s ease;
}
.mi-seccion .cta-primary:hover {
transform: translateY(-2px);
}
Estas Classes son ejemplos
No representan Classes obligatorias de Waclis.
Evita CSS global
No utilices:
button {
border-radius: 20px;
}
si solo quieres cambiar una sección.
Puede afectar:
Forms;
controles;
otros Buttons;
componentes interactivos.
Tampoco
a {
color: red;
}
si solo quieres cambiar un CTA.
Afectaría Links de toda la página.
Más peligroso aún
.btn {
width: 100%;
}
puede afectar múltiples Buttons estructurales si esa Class aparece en diferentes componentes.
Utiliza un scope
Por ejemplo:
.contacto-section .cta-primary {
}
Buttons y Bootstrap
Waclis utiliza Bootstrap 4 como parte de su entorno actual.
Por eso algunas Classes estructurales pueden estar relacionadas con ese sistema.
No elimines Classes existentes
simplemente porque quieres modificar:
color;
tamaño;
Border radius.
Agrega una Class personalizada cuando sea posible.
Por ejemplo
Mantén las Classes estructurales existentes y agrega:
cta-contacto
Después estiliza:
.mi-seccion .cta-contacto {
}
Esto suele ser más seguro
que reconstruir todo el Button.
HTML de un CTA
Si necesitas comprender la estructura exacta:
utiliza:
Editar código HTML <>
sobre el elemento seleccionado.
Puede mostrar una estructura como:
<a href="...">
<button type="button">Contactar</button>
</a>
o alguna otra composición.
No memorices este ejemplo
La estructura real puede variar.
Utiliza el HTML del elemento seleccionado
para identificar qué existe realmente.
No abras Code editor global
para cambiar una URL sencilla.
Utiliza primero:
Navigator;
Contenido;
Url.
El Code editor global debe reservarse para casos avanzados.
No modifiques JavaScript para cambiar un Link
Cambiar:
/productos
por:
/servicios
no necesita JavaScript.
Tampoco para cambiar:
Ver más
por:
Conocer servicio
Utiliza las herramientas visuales.
Ejemplo práctico 1: CTA simple
Queremos:
¿NECESITAS MÁS INFORMACIÓN?
[ CONTACTAR ]
Paso 1
Agrega Heading o Paragraph.
Paso 2
Agrega la estructura de Button correspondiente.
Paso 3
Modifica:
Text
a:
Contactar
Paso 4
Utiliza Navigator.
Paso 5
Identifica el Link.
Paso 6
Configura:
Url
hacia Contacto.
Paso 7
Personaliza:
Background;
Text Color;
Padding;
Border radius.
Paso 8
Configura Hover.
Paso 9
Revisa celular.
Paso 10
Guardar Cambios.
Paso 11
Ver página.
Paso 12
Haz clic y comprueba el destino.
Ejemplo práctico 2: primario + secundario
Queremos:
[ SOLICITAR PRESUPUESTO ]
Ver servicios
El primero
puede tener mayor protagonismo.
El segundo
puede utilizar un Link de texto.
Esto genera una jerarquía más clara que dos grandes Buttons idénticos.
Ejemplo práctico 3: dos Buttons
[ VER PRODUCTOS ] [ CONTACTAR ]
Configura cada uno independientemente.
Revisa:
Button A
Text → Ver productos
Url → Productos
Button B
Text → Contactar
Url → Contacto
No clones y cambies solamente el texto.
Ejemplo práctico 4: Card de Servicio
╭────────────────────────╮
│ │
│ [ ICON ] │
│ │
│ INSTALACIÓN │
│ │
│ Texto... │
│ │
│ [ CONOCER SERVICIO ] │
│ │
╰────────────────────────╯
Navigator puede mostrar conceptualmente:
Card
├── Icon
├── Heading
├── Paragraph
└── Link
└── Button
Clona:
Card completa
si necesitas otro Servicio.
Después actualiza:
Icon;
Heading;
Paragraph;
Text del Button;
Url;
Id.
Ejemplo práctico 5: Card completamente clicable
Link
└── Card
├── Image
├── Heading
└── Paragraph
Puedes utilizar Hover sobre Card
para indicar interacción.
No necesitas otro Link dentro
si toda la Card ya cumple esa función.
Ejemplo práctico 6: descarga
[ DESCARGAR CATÁLOGO ]
Revisa:
archivo;
Url;
opción Download si corresponde;
versión del archivo.
Después prueba la descarga real.
Ejemplo práctico 7: Button Disabled
[ PRÓXIMAMENTE ]
deshabilitado.
Pregunta primero si realmente debería ser Button.
Si no existe acción todavía
puede resultar más claro utilizar:
Próximamente
como texto o Badge.
No utilices Disabled solamente porque el Link todavía no está terminado.
Mejor no publicar un CTA incompleto.
¿Qué hacer si cambio el texto pero abre la página anterior?
Selecciona el Link y modifica:
Url
Este es el error más frecuente.
¿Qué hacer si no encuentro Url?
Probablemente tengas seleccionado:
Html Button;
Heading;
Span;
icono;
y no el Link.
Utiliza:
Navigator
o:
Seleccionar padre
Busca:
A
Link
o el elemento correspondiente.
¿Qué hacer si la Card entera es clicable?
Busca el Link padre de la Card.
No agregues otro alrededor del Button.
¿Qué hacer si la Image es clicable pero el Button no?
Revisa la jerarquía.
Puede existir:
Link
└── Image
pero el Button estar fuera.
Decide si:
ambos deberían tener destino;
solo uno.
No asumas que una estructura incompleta es un error
Puede ser una decisión del diseño.
¿Qué hacer si Image y Button abren páginas diferentes?
Comprueba si eso es intencional.
Si representan la misma Card
normalmente deberían ser coherentes.
¿Qué hacer si el Button no hace nada?
Revisa primero:
si existe Link;
Url;
Disabled;
estructura;
si forma parte de un Form;
Ver página.
No agregues JavaScript inmediatamente.
¿Qué hacer si está Disabled?
Desactiva Disabled únicamente si la acción debería estar disponible y sabes que la funcionalidad existe.
¿Qué hacer si es un Button de Form?
No lo conviertas automáticamente en Link.
Revisa primero el Form.
¿Qué hacer si el Form deja de enviar después de cambiar el Button?
Revisa cualquier modificación realizada sobre:
Type;
Name;
estructura;
HTML.
Si solo necesitabas cambiar el color
restaura las propiedades funcionales.
¿Qué hacer si quiero cambiar el color?
Utiliza:
Estilo
No necesitas editar Type.
¿Qué hacer si quiero redondearlo?
Utiliza:
Border radius
¿Qué hacer si quiero hacerlo más grande?
Revisa:
Padding;
Font size;
Width.
Evita definir Height rígida
si el texto puede ocupar dos líneas.
Padding suele ser más flexible.
¿Qué hacer si el texto no entra?
Primero:
simplifica;
revisa Width;
permite salto de línea.
No reduzcas automáticamente Font size a:
9 px
¿Qué hacer si ocupa todo el ancho y no quiero?
Revisa:
Width;
Display;
Classes heredadas.
¿Qué hacer si debería ocupar todo el ancho en móvil?
Puedes aplicar un comportamiento responsive limitado a la sección o CTA.
No utilices globalmente:
button {
width: 100%;
}
¿Qué hacer si los Buttons quedan pegados?
Agrega separación mediante:
Gap cuando la estructura lo permite;
Margin controlado;
Button Group si corresponde.
No agregues:
para crear espacios.
¿Qué hacer si quiero tres Buttons en una fila?
Comprueba:
longitud;
desktop;
tablet;
móvil.
Pueden necesitar Wrap.
Si representan opciones relacionadas
Button Group puede ser apropiado.
Si son CTA independientes
quizá una estructura de Grid sea más clara.
¿Qué hacer si Button Group parece un filtro pero no filtra?
No lo publiques como filtro.
Agrupar Buttons no crea lógica funcional.
¿Qué hacer si quiero mensual/anual?
Solo utilices dos Buttons como selector si existe una lógica real que modifica los precios o contenido.
Una apariencia de selector sin funcionalidad es engañosa.
¿Qué hacer si quiero un Button con icono?
Puedes agregar Font Icon o Svg Icon según la composición.
Mantén:
ICON + TEXTO
alineados.
No utilices un icono tan grande que supere el texto.
¿Qué hacer si el SVG cambia de color con el Button?
Puede depender de estilos compartidos.
Revisa:
Class;
fill;
stroke;
Hover.
No utilices reglas globales sobre SVG.
¿Qué hacer si al modificar Hover cambian todos?
Probablemente comparten una Class.
Comprueba:
Linked styles
Si deberían compartir Hover
es correcto.
Si uno necesita una excepción
agrega una Class específica.
¿Qué hacer si al cambiar Background cambia otro Button?
Mismo principio.
No elimines la Class base inmediatamente.
¿Qué hacer si quiero un CTA diferente en una sección específica?
Por ejemplo:
btn-primary
+
cta-hero
Puedes mantener estilos compartidos y agregar una Class de excepción.
¿Qué hacer si cloné un CTA y ambos tienen el mismo ID?
Cambia el ID de la copia.
¿Qué hacer si ambos tienen la misma Class?
Puede ser correcto.
Recuerda:
ID
→ único
Class
→ puede compartirse
¿Qué hacer si quiero enlazar a una sección de la misma página?
Puedes utilizar un ID como destino cuando la estructura correspondiente esté configurada correctamente.
Por ejemplo
una sección puede tener:
id="contacto"
y un Link puede apuntar hacia esa referencia interna.
Mantén IDs únicos.
Prueba la navegación real.
¿Qué hacer si el ancla no funciona?
Revisa:
ID exacto;
Link;
caracteres;
duplicados.
No agregues JavaScript para un ancla simple.
¿Qué hacer si Link cambia el color de todo el texto interior?
Puede formar parte del estilo del enlace.
Si toda la Card está dentro de Link
los elementos internos pueden heredar determinados estilos.
Personaliza mediante Classes específicas.
No rompas la estructura del Link solamente para cambiar un color.
¿Qué hacer si todo aparece subrayado dentro de una Card clicable?
Puede deberse a estilos del Link.
Resuélvelo mediante CSS localizado a esa Card si corresponde.
No utilices globalmente:
a {
text-decoration: none;
}
sin evaluar el resto de la Página web.
Podrías hacer que Links de texto dejen de identificarse.
¿Qué hacer si quiero quitar subrayado de un CTA?
Limita la regla al CTA.
Por ejemplo conceptualmente:
.mi-seccion .cta-link {
text-decoration: none;
}
¿Qué hacer si al hacer Hover aparece subrayado?
Revisa el estado:
hover
Configura únicamente ese elemento o Class.
¿Qué hacer si el texto desaparece en Hover?
Revisa:
Background Color;
Text Color.
Ambos estados necesitan contraste.
¿Qué hacer si el Button se desplaza demasiado en Hover?
Reduce:
Transform;
cambios de Border;
cambios de Padding.
Un Hover que modifica Padding
puede hacer que el layout se mueva.
Es preferible evitar cambios que alteren demasiado las dimensiones.
¿Qué hacer si quiero una animación?
Para el CTA puede ser suficiente una transición de Hover.
No necesitas Animate on scroll obligatoriamente.
Si utilizas:
Avanzado → Animate on scroll
hazlo con moderación.
Un CTA debería estar disponible sin obligar al visitante a esperar.
¿Qué hacer si el Button tarda en aparecer?
Revisa:
Delay;
Animation duration.
No ocultes una acción principal durante demasiado tiempo.
¿Qué hacer si el Link externo dejó de funcionar?
Actualiza Url.
¿Qué hacer si cambió el slug interno?
Actualiza todos los CTA manuales que apunten a él.
Un bloque manual no necesariamente conoce que el destino cambió.
¿Qué hacer si hay muchas páginas con el mismo Link?
Puede requerir una revisión general.
Evita duplicar innecesariamente CTA específicos en demasiados lugares si su destino cambia con frecuencia.
¿Qué hacer si quiero volver atrás?
Un Button visual que diga:
Volver
no crea automáticamente la lógica del navegador.
Si quieres dirigir a una página específica:
configura un Link hacia ella.
No asumas que el texto “Volver” ejecutará automáticamente:
history.back()
Eso sería una funcionalidad diferente.
¿Qué hacer si quiero cerrar un modal?
Un Button dentro de un componente interactivo puede depender de lógica específica.
No lo reemplaces por un Link normal sin comprender esa interacción.
Buttons de componentes existentes
Dentro de:
Carousel;
Slider;
Accordion;
Tabs;
modal;
puede haber controles que parecen Buttons.
No los trates automáticamente como CTA.
Pueden controlar el componente.
Antes de modificar:
utiliza Navigator y revisa la estructura.
No cambies Url si el control no utiliza Url.
¿Qué hacer si un control “Siguiente” deja de funcionar?
Revisa si eliminaste:
Class;
atributo;
estructura;
del componente.
No lo reconstruyas como un Link normal.
Button Toolbar y controles avanzados
Si utilizas una Toolbar:
mantén cada grupo con una función clara.
Por ejemplo conceptualmente:
[ ANTERIOR ][ SIGUIENTE ] [ GUARDAR ]
Pero no construyas interfaces complejas sin la lógica funcional correspondiente.
El Editor permite diseñar componentes
pero el aspecto visual no crea por sí mismo una aplicación.
Utilizar IA para redactar CTA
ChatGPT, Claude o Gemini pueden ayudarte.
Por ejemplo:
Tengo esta Card:
Título:
[nombre]
Descripción:
[texto]
Destino:
[página]
Necesito un CTA de máximo 4 palabras.
Debe explicar claramente qué ocurrirá al hacer clic.
Utiliza español neutro.
No inventes una acción diferente a la del destino.
IA para revisar CTA ambiguos
Tengo estos Buttons:
[lista]
Y estos destinos:
[lista]
Revisa si el texto de cada Button permite anticipar correctamente el destino.
Propón alternativas únicamente cuando sean ambiguos.
No cambies los destinos.
IA para decidir Link o Button
Tengo estas acciones dentro de una sección:
[lista]
Clasifica cuáles deberían tener mayor jerarquía visual como Button y cuáles podrían funcionar como Link de texto.
Considera:
- acción principal;
- acción secundaria;
- evitar demasiados CTA.
No inventes nuevas acciones.
IA para diagnosticar Button + Link
Este es el HTML únicamente de un CTA en Waclis:
[pegar]
Quiero cambiar:
- texto visible;
- URL.
Identifica:
1. qué elemento controla el texto;
2. qué elemento controla la URL;
3. si existe un Link envolvente;
4. si hay Links anidados.
No reescribas el HTML.
No elimines Classes.
IA para revisar un CTA clonado
Cloné este CTA en Waclis.
Original:
[datos]
Nuevo:
[datos]
Este es el HTML de la copia:
[pegar]
Comprueba si siguen presentes:
- texto anterior;
- URL anterior;
- ID duplicado;
- Target anterior;
- Classes que deben conservarse.
No modifiques el código.
IA para CSS de Button
Estoy personalizando un CTA en Waclis.
La sección utiliza:
.mi-seccion
El CTA:
.cta-primary
Necesito:
- Padding horizontal y vertical cómodo;
- Border radius de 8 px;
- texto centrado;
- Hover suave;
- no alterar Width de otros Buttons;
- responsive;
- no afectar Forms.
Waclis utiliza Bootstrap 4.
No modifiques HTML.
No agregues JavaScript.
Devuélveme solamente CSS limitado a .mi-seccion .cta-primary.
IA para primario y secundario
Tengo dos CTA:
.cta-primary
.cta-secondary
Necesito:
- Primary con mayor protagonismo;
- Secondary con fondo transparente y borde;
- ambos con igual altura visual;
- Hover coherente;
- en móvil permitir que se apilen;
- no afectar otros Buttons de Waclis.
No cambies HTML.
No agregues JavaScript.
Devuélveme solamente CSS.
IA para localizar CSS global peligroso
Revisa este CSS:
[pegar]
Busca reglas demasiado generales sobre:
- a;
- button;
- .btn;
- input[type="submit"];
que puedan modificar Links, Forms o Buttons de otras secciones.
No cambies el código todavía.
Solo indícame qué selectores tienen alcance riesgoso.
IA para responsive
Tengo dos CTA en una misma fila:
[ SOLICITAR PRESUPUESTO ]
[ VER SERVICIOS ]
En desktop deben quedar uno al lado del otro.
En celular deben apilarse.
Explícame primero cómo resolverlo mediante estructura y Grid/Flex sin posiciones absolutas.
Waclis utiliza Bootstrap 4.
No agregues JavaScript.
IA para comprobar formulario
Este Button pertenece a un Form que ya funciona:
[HTML únicamente del Form]
Quiero cambiar exclusivamente:
- texto del Button;
- color;
- Border radius.
Indícame qué atributos funcionales no debería modificar, especialmente:
- type;
- name;
- estructura del Form.
No reescribas el formulario.
Buenas prácticas para Links y botones
Recomendamos:
diferenciar Link de Button;
utilizar Navigator antes de modificar un CTA;
identificar qué elemento controla Text;
identificar qué elemento controla Url;
utilizar CTA descriptivos;
mantener una acción principal clara;
utilizar Links secundarios cuando corresponda;
evitar demasiados Buttons;
comprobar Target;
no modificar Rel sin necesidad;
utilizar Download únicamente cuando corresponda;
conservar propiedades funcionales de Forms;
no modificar Type por razones visuales;
utilizar Disabled únicamente con una razón funcional;
evitar Links anidados;
clonar la unidad completa;
actualizar Url después de clonar;
mantener IDs únicos;
utilizar Classes para estilos compartidos;
aprovechar Linked styles;
crear Hover coherente;
mantener contraste;
adaptar Buttons a celular;
limitar CSS a cada sección;
probar todos los Links mediante Ver página.
Errores frecuentes
Creer que cambiar el texto cambia la URL
No necesariamente.
Editar Html Button cuando necesitas editar Link
Utiliza Navigator.
Dejar la URL de la Card anterior después de clonar
Actualiza Url.
Dejar el mismo ID
Los IDs deben ser únicos.
Eliminar Classes compartidas para cambiar el color de un solo Button
Agrega una Class específica.
Modificar Type para cambiar apariencia
Type es una propiedad funcional.
Cambiar Name de un Button de formulario sin necesidad
Puede afectar comportamiento existente.
Activar Disabled para cambiar el estilo
No es una herramienta visual.
Crear Links dentro de Links
Revisa la estructura.
Activar Link en Image cuando ya existe un Link padre
Utiliza Navigator.
Hacer toda la Card clicable y agregar otro Link interno sin revisar
Evita estructuras innecesarias.
Utilizar “Haz clic aquí”
Describe la acción.
Utilizar “Más” o “Continuar” sin contexto
Sé específico.
Crear Buttons demasiado largos
Resume.
Poner cinco CTA con la misma importancia
Define prioridades.
Utilizar Button Group como supuesto filtro
No crea funcionalidad automáticamente.
Crear mensual/anual visualmente sin lógica de cambio
No simules interacción.
Utilizar Button Toolbar para acciones simples
Mantén la estructura proporcional a la necesidad.
Hacer un elemento no clicable parecer Button
Puede confundir.
Utilizar Button para “Nuevo”
Utiliza Badge si es una etiqueta.
Utilizar Hover demasiado fuerte
Mantén una interacción moderada.
Hacer desaparecer el texto en Hover
Revisa contraste.
Cambiar Padding en Hover
Puede mover el layout.
Utilizar Width fijo demasiado grande
Puede desbordar en celular.
Mantener dos Buttons demasiado estrechos en móvil
Apílalos cuando sea necesario.
Aplicar CSS global sobre button
Puede afectar formularios.
Aplicar CSS global sobre a
Puede modificar todos los Links.
Aplicar CSS global sobre .btn
Puede afectar múltiples componentes.
Eliminar indicadores de foco sin alternativa
Puede dificultar navegación.
Convertir un Button de Form en Link sin comprender la funcionalidad
Pueden cumplir funciones diferentes.
Editar JavaScript para cambiar una URL sencilla
No es necesario.
Abrir Code editor para cambiar Text
Utiliza Contenido.
Publicar Links rotos
Prueba todos.
Mantener promociones vencidas
Actualiza CTA y destino.
Dejar texto o URL de ejemplo
Revisa antes de guardar.
Flujo recomendado
1. DEFINIR LA ACCIÓN
↓
2. DECIDIR SI NECESITAS LINK O BUTTON
↓
3. AGREGAR / SELECCIONAR EL ELEMENTO
↓
4. REVISAR NAVIGATOR
↓
5. IDENTIFICAR LINK + BUTTON SI EXISTEN
↓
6. MODIFICAR TEXT
↓
7. MODIFICAR URL
↓
8. REVISAR TARGET
↓
9. REVISAR REL / DOWNLOAD SOLO SI CORRESPONDE
↓
10. REVISAR TYPE / NAME SI ES UN FORM
↓
11. PERSONALIZAR ESTILO
↓
12. CONFIGURAR HOVER
↓
13. REVISAR LINKED STYLES
↓
14. REVISAR ID / CLASS
↓
15. COMPROBAR DESKTOP
↓
16. COMPROBAR TABLET
↓
17. COMPROBAR CELULAR
↓
18. GUARDAR CAMBIOS
↓
19. VER PÁGINA
↓
20. HACER CLIC Y COMPROBAR EL DESTINO
Checklist antes de finalizar
Sé cuál es la acción principal.
Elegí correctamente Link o Button.
Utilicé Navigator.
Identifiqué qué elemento controla el texto.
Identifiqué qué elemento controla la URL.
El texto del CTA es claro.
El texto anticipa correctamente qué ocurrirá.
La URL es correcta.
No queda la URL de otro elemento clonado.
Probé el destino.
Target tiene el comportamiento esperado.
No modifiqué Rel sin necesidad.
Download se utiliza solamente cuando corresponde.
No hay Links anidados innecesarios.
No activé Link sobre una Image que ya estaba dentro de uno.
Si la Card completa es clicable, la estructura es coherente.
El Button no contiene un destino diferente al resto de la Card.
Si pertenece a un Form, no modifiqué propiedades funcionales sin comprenderlas.
Type es correcto.
Name se mantiene cuando corresponde.
Disabled solo está activo cuando debe estarlo.
Autofocus no se utiliza como recurso visual.
Los CTA principales tienen mayor jerarquía.
Los secundarios no compiten innecesariamente.
No existen demasiados Buttons.
Button Group contiene acciones relacionadas.
No simulé filtros o selectores sin funcionalidad.
Button Toolbar se utiliza solamente cuando corresponde.
Los IDs personalizados son únicos.
Las Classes compartidas tienen sentido.
Linked styles tiene el alcance esperado.
Background mantiene suficiente contraste.
Text Color mantiene suficiente contraste.
Hover es visible y coherente.
Active no se utiliza como falsa lógica de selección.
Los Buttons tienen suficiente Padding.
El área clicable es cómoda.
Desktop se ve correctamente.
Tablet se ve correctamente.
Celular se ve correctamente.
Los Buttons largos no desbordan.
Los CTA se apilan si no existe espacio suficiente.
No existe scroll horizontal inesperado.
No utilicé posiciones rígidas innecesarias.
No apliqué CSS global sobre a.
No apliqué CSS global sobre button.
No apliqué CSS riesgoso sobre .btn.
No eliminé Classes estructurales sin comprenderlas.
No utilicé JavaScript para un cambio que puede resolverse desde Contenido.
No quedan textos de ejemplo.
No quedan URLs de ejemplo.
Guardé los cambios.
Probé todos los CTA mediante Ver página.
En resumen
Los componentes relacionados con acciones cumplen funciones diferentes.
LINK
→ define un destino
HTML BUTTON
→ presenta un botón y sus propiedades
BUTTON
→ puede formar parte de diferentes estructuras de interfaz
BUTTON GROUP
→ agrupa Buttons relacionados
BUTTON TOOLBAR
→ organiza grupos de controles
Una estructura muy habitual puede ser:
Link
└── Html Button
Por eso debes recordar:
cambiar el Text del Button no significa cambiar la Url del Link.
Si clonas:
[ VER PRODUCTOS ]
→ /productos
para crear:
[ VER SERVICIOS ]
debes revisar:
TEXT
→ Ver servicios
URL
→ Servicios
y no solamente el texto.
Utiliza Navigator para identificar qué elemento debes seleccionar.
También evita crear:
Link
└── Card
└── Link
└── Button
sin comprender la estructura.
Los Links anidados pueden generar comportamientos incorrectos.
Si toda la Card ya es clicable:
puede no necesitar otro Link interno.
Cuando trabajas con un Button dentro de un Form:
no cambies Type, Name u otras propiedades funcionales solamente para realizar un cambio visual.
Para color, tamaño, espacios y bordes utiliza Estilo.
En Hover:
mantén una transición clara pero moderada.
En responsive:
Desktop
[ CONTACTAR ] [ VER SERVICIOS ]
puede necesitar convertirse en:
Mobile
[ CONTACTAR ]
[ VER SERVICIOS ]
No reduzcas los Buttons hasta volverlos difíciles de leer o seleccionar.
Finalmente:
Guardar Cambios → Ver página → hacer clic en cada CTA → comprobar el destino real.
Un buen Button no es simplemente un rectángulo atractivo.
Debe permitir que el visitante pueda responder antes de seleccionarlo:
“Sé qué ocurrirá cuando haga clic aquí.”
¿Necesitas más ayuda?
Si este artículo no resolvió tu consulta, nuestro equipo puede ayudarte personalmente.
Soporte por WhatsApp