---
title: "Como mudar a cor dos botões de Feedback"
slug: "how-to-change-the-color-of-feedback-buttons"
tags: ["Knowledge base design", "Customization"]
updated: 2026-06-22T08:58:57Z
published: 2026-06-22T08:58:57Z
canonical: "docs.document360.com/how-to-change-the-color-of-feedback-buttons"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

![Custom CSS and JavaScript settings panel in the Document360 Knowledge base portal](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20css%20&%20js.png)
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;
  }
}
```

1. Atualize os códigos de cores para os valores desejados.
2. Clique **em Salvar**.

![CSS tab showing the feedback button color snippet saved in the Custom CSS and JavaScript panel](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1767002457678.png)

---

## 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.

![Feedback buttons showing the default grey color before applying the CSS](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/2_Screenshot-Color_of_feedback_button_before_applying_CSS.png)

**Depois**

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

![Feedback buttons showing custom green and red colors after applying the CSS](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/3_Screenshot-Color_of_feedback_button_after_applying_CSS.png)

---

## 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.