Centro de Ayuda Wix
    Inicio
  1. Crear tu sitio
  2. Usar el Editor de Wix
  3. Agregar y personalizar elementos
  4. Botones
    5. Editor de Wix: personalizar el diseño de tus botones

Editor de Wix: personalizar el diseño de tus botones

9 min de lectura
Crea botones hermosos y llamativos que coincidan con el sitio y alienten a los visitantes a que interactúen. 
Haz clic en el icono Diseño  en el botón para comenzar a personalizar.
En este artículo, obtén más información sobre lo siguiente: 

Personalizar los estados de los botones

Puedes personalizar los estados de cada botón del sitio por separado. Esto te permite crear efectos sorprendentes que los visitantes ven mientras navegan por el sitio.
Por ejemplo, puedes elegir un color para la vista normal, un color diferente para la vista al pasar el cursor y otro para cuando se hace clic en el botón. Esto resalta el botón para mostrar a tus visitantes que pueden interactuar con él.
Importante:
Los efectos de pasar el cursor (pulsar) en los botones de iconos no son compatibles actualmente con iOS. Esto significa que los visitantes que vean tu sitio en un dispositivo iOS no verán el estado del cursor si pulsan el botón.

Diseño del botón

Hay una variedad de opciones de personalización disponibles. Según el tipo de botón, puedes ajustar el fondo, el texto y el icono. Elige los colores, los rellenos, las esquinas, el sombreado y más.

Elige lo que deseas hacer:

Más información sobre la personalización de otros tipos de botones:

Glosario de diseño

Opciones de diseño de botones

Opción
Explicación
Modo de uso
Rellenos
Agrega diferentes rellenos, como colores, imágenes, patrones y degradados, para crear efectos impactantes y coloridos en tu botón.
  • Haz clic en la caja de color de cada capa y elige el tipo de relleno, luego arrastra el control deslizante para cambiar la opacidad de la capa de relleno.
  • Reordena las capas de relleno arrastrándolas hacia arriba y hacia abajo en la lista. 
Bordes
Personaliza el borde del botón para que se destaque. Personaliza todos los lados del botón juntos, o cada lado por separado, al seleccionar el icono de bloqueo y desbloqueo.
  • Haz clic en el campo Ancho e ingresa el ancho del píxel o ajusta el control deslizante.
  • Haz clic en el menú desplegable Estilo y selecciona el estilo del borde.
  • Haz clic en la caja de color Rellenar, selecciona el color del borde y usa el control deslizante para ajustar la opacidad. 
Esquinas
Cambia las esquinas del botón para hacerlas más redondeadas o cuadradas. Cambia el tamaño de todas las esquinas juntas o personaliza cada esquina por separado al hacer clic en el icono de bloqueo y desbloqueo. 
Haz clic en los campos de píxeles que hay en cada esquina para ingresar la cantidad de píxeles que deseas aplicarle.
Sombreado
Agrega capas de sombras al botón y personaliza el color, el tamaño y más.
  • Haz clic en la caja de color de cada capa de sombra y personaliza el color, el tipo de sombreado, el ángulo, el tamaño, la distancia y lo borroso. Luego, arrastra el control deslizante para cambiar la opacidad de la sombra.
  • Reordena las capas de sombreado al arrastrarlas hacia arriba y hacia abajo en la lista. 
Si usas un botón para cargar:
  • Haz clic en la palanca para activar el sombreado.
  • Usa los controles deslizantes para editar el ángulo, la distancia, el tamaño y cuán borroso será. Luego, usa el control deslizante y la caja de color para editar el color y la opacidad.
Estilo

Cambia el estilo de tu botón.
  • Haz clic en el menú desplegable Elige qué mostrar y elige si deseas mostrar el texto, el icono o ambos.
  • Selecciona la alineación, la posición y el espaciado del texto o del icono (si corresponde).
  • Establece el relleno alrededor del texto o del icono.

Opciones de formato de texto

Opción
Explicación
Modo de uso
Mostrar texto
Muestra u oculta texto en tu botón.
Desliza la palanca para mostrar u ocultar el texto en tu botón.
Tema
Selecciona el tema del texto del botón.
Selecciona un tema de texto en el menú desplegable.
Fuentes
Elige la fuente del texto del botón.
Haz clic en el menú desplegable y selecciona una fuente.
Tamaño de la fuente
Cambia el tamaño del texto del botón.
Arrastra el control deslizante para aumentar o disminuir el tamaño de la fuente, o ingresa un valor.
Formato del texto
Aplica formato a tu texto.
  • Da formato a tu texto usando las opciones: negrita, cursiva, subrayado, efecto tachado, colores, capitalización, dirección y alineación del texto.
Espaciado de caracteres
Cambia el espacio entre los caracteres del texto.
Arrastra el control deslizante para aumentar o disminuir el espaciado, o ingresa un valor.
Sombreado
Crea sombras para tu texto. Puedes tener más de una sombra.
Para agregar uno nuevo, haz clic en Agregar un sombreado. Haz clic en el icono Personalizar sombreado para modificarlo.

Opciones de diseño de iconos

Opción
Explicación
Modo de uso
Mostrar icono
Mostrar u ocultar un ícono en tu botón.
Desliza la palanca para mostrar u ocultar el icono en tu botón.
Tamaño
Cambiar el tamaño de tu ícono.
Arrastra el control deslizante para aumentar o disminuir el tamaño de tu icono, o ingresa un valor.
Color
Cambiar el color del ícono.
Haz clic en la caja de color y selecciona un color.
Rotar
Ajusta la rotación del icono.
Arrastra el control para personalizar la rotación del icono o ingresa los grados en la caja de texto.

¿Te ha sido útil?

|
En este artículo
  • Personalizar los estados de los botones
  • Diseño del botón
  • Glosario de diseño
  • Opciones de diseño de botones
  • Opciones de formato de texto
  • Opciones de diseño de iconos