Configuración de estilo

Color de texto

Puntos:
configura el color y la transparencia del texto. Es el ajuste más importante para asegurar contraste con el fondo.

Qué cambia este ajuste:
si baja la legibilidad, el botón pierde clics incluso con buen diseño.

Consejo de ajuste:
revisa el contraste con criterio WCAG, sobre todo en textos pequeños.

Elementos de configuración

• Color de texto: define el color de texto y optimiza el contraste con el fondo.
• Alpha (Transparencia): ajusta la opacidad del texto para controlar su intensidad (0 a 1).
• Responsivo: habilita ajustes por dispositivo para adaptarse a diferencias de fondo.

el color de texto en Hover también puede ajustarse por separado. La transición sigue el valor de Duration en estilo. En WCAG 2.1 se recomienda 4.5:1 para texto normal y 3:1 para texto grande.

Sombra de texto

Puntos:
configura la sombra del texto. Útil para mejorar legibilidad sobre imágenes de fondo.

Qué cambia este ajuste:
el equilibrio entre visibilidad y decoración cambia según la intensidad de la sombra.

Consejo de ajuste:
empieza con Blur y Alpha bajos, y aumenta solo lo necesario.

Elementos de configuración

• Sombra de texto (ON/APAGADO): activa o desactiva la sombra de texto.
• Color: define el color de la sombra.
• Blur + unidad: ajusta el desenfoque y la expansión.
• Horizontal + unidad: ajusta el desplazamiento horizontal.
• Vertical + unidad: ajusta el desplazamiento vertical.
• Responsivo: habilita ajustes por dispositivo.

también puedes configurar sombra de texto para Hover. Sobre imágenes, usa una sombra con luminancia opuesta al fondo para mejorar la lectura.

Borde

Puntos:
define color, grosor y tipo de línea del borde. Ayuda a que el botón se perciba como clicable.

Qué cambia este ajuste:
incluso en fondos claros, mejora la separación visual.

Consejo de ajuste:
comienza alrededor de 1px; un borde demasiado grueso reduce protagonismo del texto.

Elementos de configuración

• Borde (ON/APAGADO): activa o desactiva el borde.
• Color + Alpha: define color y transparencia del borde.
• Ancho: define el grosor.
• Style (none / solid / dashed / dotted): define tipo de línea.
• Box Sizing (border-box / content-box): define método de cálculo del tamaño.
• Responsivo: habilita ajustes por dispositivo.

con border-box, el borde se incluye en ancho/alto y no rompe layout. Con content-box, el tamaño total aumenta según el borde. El borde en Hover también puede ajustarse por separado.

Radio de borde

Puntos:
configura el redondeo de las esquinas. Ajusta la sensación de marca (rígida o suave).

Qué cambia este ajuste:
la percepción del radio cambia según la proporción respecto al tamaño del botón.

Consejo de ajuste:
como referencia, 20% a 35% de la altura suele dar buen equilibrio.

Elementos de configuración

• Use Individual Settings: permite ajustar cada esquina por separado.
• Ajuste en lote: Radio de borde + unidad para aplicar el mismo valor a las 4 esquinas.
• Ajuste individual: Top Left / Top Right / Bottom Right / Bottom Left + unidad.
• Unidad: px / % / em / rem.
• Responsivo: habilita ajustes por dispositivo.

con 50% obtienes círculo (si el elemento es cuadrado) o elipse. El radio de Hover también puede configurarse para crear cambios de forma.

Sombra interior

Puntos:
configura la sombra interna para crear sensación de profundidad o pulsación.

Qué cambia este ajuste:
añade volumen a diseños planos sin cambiar la estructura.

Consejo de ajuste:
evita valores muy fuertes; usa Blur y Alpha bajos como base.

Elementos de configuración

• Sombra interior (ON/APAGADO): activa o desactiva la sombra interna.
• Color: define color.
• Blur: define desenfoque.
• Horizontal: define desplazamiento horizontal.
• Vertical: define desplazamiento vertical.
• Spread: define expansión.
• Responsivo: habilita ajustes por dispositivo.

se emite como box-shadow: inset. También puede configurarse en Hover. Internamente se dibuja con ::after, por lo que se recorta correctamente junto al radio de borde.

Sombra

Puntos:
configura la sombra externa para separar el botón del fondo y guiar la mirada.

Qué cambia este ajuste:
la dirección y distancia de la sombra definen sensación de relieve.

Consejo de ajuste:
en móvil suele verse más intensa, por lo que conviene suavizar en SP.

Elementos de configuración

• Shadow (ON/APAGADO): activa o desactiva sombra externa.
• Color + Alpha: define color y transparencia.
• Blur: define desenfoque.
• Horizontal: define desplazamiento horizontal.
• Vertical: define desplazamiento vertical.
• Spread: define expansión.
• Responsivo: habilita ajustes por dispositivo.

Transparencia

Puntos:
configura opacidad global y modo de fusión del elemento.

Qué cambia este ajuste:
con el mismo color, el resultado visual cambia mucho según Opacidad y Blend.

Consejo de ajuste:
si baja la legibilidad, corrige primero color de texto y contraste del fondo.

Elementos de configuración

• Opacidad: ajusta opacidad del elemento completo.
• Modo de mezcla: ajusta cómo se mezcla con el fondo (normal, multiply, screen, overlay, etc.).
• Responsivo: habilita ajustes por dispositivo.

bajar Opacidad afecta a todos los hijos (texto, icono, etc.). Si solo quieres transparentar el fondo manteniendo legibilidad, ajusta antes el Alpha del fondo. La transparencia en Hover también puede ajustarse.

Límite de Modo de mezcla:
al usar varios blend modes en capas distintas (fondo, miniatura, banda), el resultado puede variar por orden de composición del navegador. Ajusta y verifica capa por capa.

Transición

Puntos:
define la velocidad del cambio de estado normal a Hover.

Qué cambia este ajuste:
demasiado rápido se percibe brusco; demasiado lento se siente poco reactivo.

Consejo de ajuste:
usa Duration 200-350ms como base y añade Delay o easing personalizado solo cuando haga falta.

Elementos de configuración

• Duración (ms): tiempo del cambio.
• Retardo (ms): espera antes de iniciar el cambio.
• Suavizado: curva de aceleración (ease, ease-in, ease-out, ease-in-out, linear, Personalizado).
• Valor personalizado: curva personalizada en formato cubic-bezier.
• Restablecer: restablece los ajustes de esta sección.
• Aviso al usar animación de texto: comprueba posibles interferencias.

esta transición se aplica a color de texto, borde, radio de borde, sombra, sombra interior y transparencia dentro del panel de estilo. Fondo e icono tienen transición propia en sus paneles.

Límite de propiedades:
internamente transicionan color, text-shadow, border, border-radius, box-shadow y opacity. background y transform quedan fuera de este panel y se controlan en sus ajustes específicos.