Cómo cambiar el color del icono en un elemento de botón usando código personalizado

En la mayoría de los casos, los iconos de los botones heredan automáticamente los estilos predeterminados. Sin embargo, al trabajar con fondos de botones personalizados, colores de marca o diseños oscuros, es posible que deba definir manualmente el color del icono para garantizar una visibilidad adecuada y un estilo uniforme.

El Elemento de botón GemPages admite dos tipos de diseño, dependiendo de cómo esté configurado el botón:

• Botón sin icono: muestra solo el texto del botón
• Botón con icono: muestra un icono junto al texto del botón

Si está usando un Botón con icono En el diseño, puede personalizar la apariencia de los iconos usando CSS personalizado. En esta guía, aprenderá cómo hacerlo. cambiar el color del icono al utilizar un botón que incluye un icono.

Por qué el color del icono importa en el diseño de botones

Los iconos que aparecen dentro de los botones ayudan a los usuarios a comprender rápidamente el propósito de una acción.

Sin embargo, el color predeterminado del icono no siempre coincide con tus necesidades de diseño. En muchos proyectos reales, los comerciantes quieren que los iconos de sus botones:

• Colores que coincidan con la marca
• Mantente visible sobre fondos oscuros o degradados.
• Alinear con el color del texto del botón
• Mantenga un estilo uniforme en varias secciones.

Si el color del icono no contrasta bien con el fondo, puede resultar difícil de ver, lo que reduce la eficacia del botón.

Cómo cambiar el color del icono en un elemento de botón.

Sigue los pasos que se indican a continuación para aplicar un color de icono personalizado a tu botón.

Paso 1: Abra el código personalizado del botón.

• Abre tu página en el editor.
• Localice la opción Elemento de botón que contiene el icono.
• Haz clic con el botón derecho en el elemento Botón.
• Seleccione Código Personalizado.

Se abrirá el panel de Código personalizado.

Paso 2: Agregue el Código CSS

Dentro de CSS En la pestaña, agregue el siguiente código:

Reemplazar:

ID del elemento con la clase que se muestra en la parte superior.

#ffffff con su código de color preferido. 

Si no conoce el código de color HEX que desea utilizar, puede generarlo mediante una herramienta de selección de color en línea. Aquí tienes algunos sitios web útiles:

• Herramienta en línea para seleccionar coloresPermite elegir colores mediante una rueda de colores y copiar instantáneamente valores HEX, RGB o HSL.
• Herramienta de selección de color de imagen: Te permite subir una imagen y hacer clic en cualquier área para extraer su código de color HEX exacto.

Paso 3: Guarde y Publique

Después de agregar el código, haga clic en Guardar. TEl color del icono se actualizará inmediatamente.

Consejos para elegir colores de iconos eficaces

Considere lo siguiente:

1. Mantén un fuerte contraste.

Los iconos deben ser fáciles de ver.

Buen ejemplo de contraste:

• Botón oscuro + icono blanco
• Botón claro + icono oscuro

Ejemplo de bajo contraste:

• Botón oscuro + icono oscuro
• Botón de luz + icono de luz

2. Mantente dentro de la paleta de colores de tu marca.

Utilice los colores oficiales de la marca siempre que sea posible.

Evita usar colores aleatorios que rompan la coherencia visual.

3. Prueba en todos los dispositivos

Comprobar la visibilidad del icono en:

• Escritorio
• Tableta
• Móvil

Algunos colores se ven diferentes en pantallas más pequeñas.

Si también necesita cambiar el tamaño de los iconos, puede seguir la guía en Cómo cambiar el tamaño del icono en un elemento Button usando código personalizado Ajustar las dimensiones de los iconos antes de aplicar la personalización de color.