Como alterar a cor do ícone em um elemento de botão usando código personalizado

Na maioria dos casos, os ícones dos botões herdam automaticamente os estilos padrão. No entanto, ao trabalhar com fundos de botões personalizados, cores da marca ou layouts escuros, pode ser necessário definir manualmente a cor do ícone para garantir a visibilidade adequada e um estilo consistente.

As Elemento de botão O GemPages suporta dois tipos de layout, dependendo de como o botão está configurado:

• Botão sem ícone: Exibe apenas o texto do botão.
• Botão com ícone: Exibe um ícone ao lado do texto do botão.

Se você estiver usando um Botão com ícone Para personalizar o layout, você pode usar CSS personalizado para alterar a aparência dos ícones. Neste guia, você aprenderá como fazer isso. Alterar a cor do ícone Ao usar um botão que inclui um ícone.

Por que a cor do ícone é importante no design de botões?

Os ícones dentro dos botões ajudam os usuários a entender rapidamente a finalidade de uma ação.

No entanto, a cor padrão do ícone nem sempre corresponde às suas necessidades de design. Em muitos projetos reais, os lojistas desejam que os ícones de seus botões:

• Combine as cores da marca.
• Mantenha-se visível em fundos escuros ou com gradiente.
• Alinhar com a cor do texto do botão
• Mantenha um estilo consistente em todas as seções.

Se a cor do ícone não contrastar bem com o fundo, pode ficar difícil de ver, reduzindo a eficácia do botão.

Como alterar a cor do ícone em um elemento de botão

Siga os passos abaixo para aplicar uma cor de ícone personalizada ao seu botão.

Passo 1: Abra o código personalizado do botão.

• Abra sua página no editor.
• Localize o Elemento de botão que contém o ícone.
• Clique com o botão direito do mouse no elemento Botão.
• Selecionar Código personalizado.

O painel de Código Personalizado será aberto.

Passo 2: Adicione o código CSS

No interior do APF Na guia, adicione o seguinte código:

Substituir:

elementoID com a classe mostrada na parte superior.

# Ffffff com o código de cores de sua preferência. 

Se você não souber o código HEX da cor que deseja usar, poderá gerar um usando uma ferramenta online de seleção de cores. Aqui estão alguns sites úteis:

• Ferramenta online de seleção de coresPermite escolher cores usando um círculo cromático e copiar instantaneamente os valores HEX, RGB ou HSL.
• Ferramenta de seleção de cores de imagemPermite carregar uma imagem e clicar em qualquer área para extrair seu código de cor HEX exato.

Etapa 3: salvar e publicar

Após adicionar o código, clique em Salve. TA cor do ícone será atualizada imediatamente.

Dicas para escolher cores de ícones eficazes

Considere o seguinte:

1. Manter um forte contraste

Os ícones devem ser fáceis de visualizar.

Bom exemplo de contraste:

• Botão escuro + ícone branco
• Botão claro + ícone escuro

Exemplo de baixo contraste:

• Botão escuro + ícone escuro
• Botão de luz + ícone de luz

2. Mantenha-se dentro da paleta de cores da sua marca.

Utilize as cores oficiais da marca sempre que possível.

Evite cores aleatórias que quebrem a consistência visual.

3. Teste em vários dispositivos

Verificar a visibilidade do ícone em:

• Desktop
• Tablet
• Mobile

Algumas cores aparecem de forma diferente em telas menores.

Se você também precisar redimensionar ícones, pode seguir o guia em Como alterar o tamanho do ícone em um elemento Button usando código personalizado Para ajustar as dimensões do ícone antes de aplicar a personalização de cores.