Para acciones principales: cotizar, reservar, comprar o contactar.
Laboratorio de componente
Botones
Página de laboratorio para construir botones reutilizables. Efectos, estados de interacción y código generado.
BOT-LABPreparado
Preview
Preview base del botón
BOT-001 · BaseEscríbenos por WhatsApp→
Botón principal de prueba. Esta base servirá para aplicar estilos visuales.
Estilos visuales
Opciones de estilo
STYLE-002Secundario outline
Para acciones de apoyo sin competir con el CTA principal.
STYLE-003Glass premium
Para interfaces con transparencia, blur y sensación moderna.
STYLE-004WhatsApp directo
Para contacto rápido. Se adapta al número real del cliente.
STYLE-005Ghost minimal
Para enlaces secundarios dentro de secciones limpias.
STYLE-006Ancho completo
Para formularios, cards de precio o acciones en mobile.
Animaciones
Opciones de movimiento
ANIM-GLASS-001Smooth Glass Motion
Transiciones suaves con escala, opacidad y elevación ligera. Sin rebotes ni rotaciones.
ANIM-001Entrada suave
Para botones que aparecen al cargar una sección o al entrar en pantalla.
ANIM-002Pulse controlado
Para llamar atención sin saturar. Útil en WhatsApp o CTA principal.
ANIM-003Lift hover
Para sensación táctil en cards, paquetes o botones secundarios.
ANIM-004Rebote sutil
Para botones promocionales o acciones que requieren más energía visual.
ANIM-005Slide de flecha
Para indicar avance, navegación o lectura de más contenido.
ANIM-006Respiración premium
Para CTAs importantes que deben sentirse activos sin moverse demasiado.
Efectos
Opciones de FX
FX-001Glow suave
Para destacar CTAs principales sin convertirlos en elementos agresivos.
FX-002Reflejo premium
Para una sensación tipo vidrio o metal pulido en secciones premium.
FX-003Sombra elevada
Para separar visualmente botones sobre cards, fondos oscuros o paneles.
FX-004Borde luminoso
Para estados destacados, botones seleccionados o navegación visual.
FX-005Profundidad 3D
Para botones con sensación física, útil en interfaces más interactivas.
FX-006Liquid glass
Para estilos con blur, transparencia y reflejo adaptable al fondo.
Estados
Estados de interacción
STATE-001Normal
Estado base del botón antes de interacción del usuario.
STATE-002Hover
Estado visual al pasar el mouse. Debe indicar que el elemento es clickeable.
STATE-003Focus
Estado obligatorio para navegación por teclado y accesibilidad mínima.
STATE-004Active
Estado al presionar. Debe sentirse táctil y confirmar la acción.
STATE-005Disabled
Estado deshabilitado. Debe verse inactivo y no prometer interacción.
STATE-006Loading
Estado de espera para formularios, envíos o acciones asíncronas.
STATE-007Selected
Estado para opciones activas, filtros, tabs o selección dentro del laboratorio.
Código generado
Combinación actual
BOT-001 + STYLE-001 + ANIM-GLASS-001 + FX-001 + STATE-001Combinación
BOT-001 + STYLE-001 + ANIM-GLASS-001 + FX-001 + STATE-001
HTML sugerido
CSS base sugerido