Como mudar a cor dos botões de Feedback

Os botões de feedback Sim e Não no final de cada artigo aparecem cinza por padrão quando os leitores não estão passando o mouse sobre eles. Esse padrão de baixo contraste pode dificultar a percepção dos botões, reduzindo a probabilidade de os leitores se envolverem com eles. Você pode sobrescrever as cores padrão dos botões usando um trecho CSS para torná-las mais visíveis, combinar com as cores da sua marca ou criar uma distinção visual mais clara entre as opções de feedback positivo e negativo.

Quando usar isso

Use essa personalização quando quiser:

• Torne os botões de feedback mais evidentes para que os leitores tenham mais chance de interagir com eles.
• Aplique cores da marca nos botões Sim e Não para criar uma experiência visual consistente.
• Diferencie os botões Sim e Não com cores distintas, por exemplo, verde para Sim e vermelho para Não, para reforçar seu significado rapidamente.

Antes de começar

• Você precisa de acesso às Configurações (
  ) > site de base de conhecimento > Personalização do site > CSS & JavaScript personalizados no portal da base de conhecimento.
• Tenha os códigos de cores do HEX desejados prontos antes de começar. O trecho padrão usa #5ebf83 (verde) para Sim e #e67367 (vermelho/laranja) para Não.

Como mudar a cor padrão do botão de feedback

1. Navegar até Configurações (

   ) > site da base de conhecimento > personalização do site > CSS & JavaScript personalizados no portal da base de conhecimento.

   

2. No painel de navegação à esquerda, selecione a aba CSS e cole o seguinte trecho:

.article-feedback-action{
  button[aria-label="Yes"]{
    background-color: #5ebf83;
    color: white;
  }
  button[aria-label="No"]{
    background-color: #e67367;
    color: white;
  }
}

3. Atualize os códigos de cores para os valores desejados.

4. Clique em Salvar.

   

Desfecho

Antes

Os botões de feedback aparecem cinza quando os leitores não estão passando o mouse sobre eles, tornando-os facilmente ignorados.

Depois

Após aplicar o CSS, os botões de feedback aparecem nas cores especificadas o tempo todo, não apenas ao pairar.

Melhores práticas

• Mantenha sim e não visualmente distintos. Os leitores processam rapidamente a semântica das cores. Usar verde para Sim e vermelho ou laranja para Não segue a convenção estabelecida e reduz o esforço cognitivo. Evite usar cores semelhantes para ambos os botões.
• Verifique o contraste com o fundo da sua página. As cores dos botões que você escolher devem ser legíveis tanto contra fundos do modo Claro quanto do Escuro. Use um verificador de contraste para verificar se suas escolhas atendem aos padrões WCAG AA (mínimo 3:1 para componentes de interface).
• Teste após salvar. Abra um artigo no seu site de base de conhecimento e confirme que os botões aparecem nas cores corretas tanto no estado padrão quanto ao passar o cursor.