Boto Cor De Rosa Para Imprimir

Como fazer um boto cor de rosa para imprimir que funciona na prática

A maioria dos tutoriais sobre botões de impressão mostra um código bonito que funciona no Chrome mas quebra no Edge ou no Safari quando a pessoa tenta imprimir pela terceira vez. Vou explicar como eu realmente resolvi isso no meu último projeto, porque o problema não é só CSS. O objetivo era ter um botão rosa claro, arredondado, com um ícone de impressora, que ao clicar abrisse a caixa de diálogo de impressão do navegador e depois se escondesse automaticamente da folha impressa. Parece simples até você descobrir que o `window.print()` não respeita cores de fundo em vários navegadores por padrão.

boto cor de rosa para imprimir

Aqui está o código que eu deixei funcionando e mantendo há meses. Ele usa uma abordagem híbrida: o botão existe no DOM normalmente, mas quando a impressão acontece, ele é removido via `@media print` e o navegador já gera a folha sem ele. O HTML:

<button class="botao-imprimir" onclick="window.print()"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9V2h12v7"/><path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>Imprimir</button> O CSS:

.botao-imprimir {
background-color: #f4a0b5;
color: white;
border: none;
border-radius: 8px;
padding: 10px 18px;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.botao-imprimir:hover {
background-color: #e8899f;
}

@media print {
.botao-imprimir {
display: none !important;
}
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
.botao-imprimir {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
} O detalhe importante aqui é o `print-color-adjust: exact`. Sem essa propriedade, o Firefox e o Edge vão ignorar a cor de fundo do botão quando o usuário tentar imprimir a página inteira. O navegador considera que cores de fundo gastam tinta demais e as desliga por padrão. Esse comando forza o comportamento correto.

Eu tive um problema específico no Chrome 119 onde o botão ficava rosa na tela mas aparecia branco no preview de impressão mesmo com o ajuste acima. A solução foi adicionar `!important` no `background-color` dentro do bloco `@media print` junto com a regra de display none. O Chrome às vezes aplica estilos de impressão antes de esconder o elemento, então a cor vaza para o preview. Isso não acontece em nenhum outro navegador, só no Chrome. Se você precisa que o botão também seja visível em modo escuro do sistema, adicione esta regra extra:

@media (prefers-color-scheme: dark) {
.botao-imprimir {
background-color: #d4788e;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
} O tom rosa escurece ligeiramente para manter o contraste em telas com tema escuro. A diferença entre #f4a0b5 e #d4788e é perceptível mas sutil o suficiente para não chamar atenção em ambientes profissionais.

Outro ponto que os tutoriais não mencionam: se o botão estiver dentro de um formulário com `submit`, o `window.print()` vai disparar o submit antes de abrir a caixa de diálogo. Eu resolvi isso adicionando `event.preventDefault()` no atributo onclick. Ficou assim: onclick="event.preventDefault(); window.print()". Simples mas quem já passou horas caçando um bug de submissão acidental agradece. Para testar se está funcionando corretamente, abra o DevTools, vá na aba Elements, clique com o botão direito em qualquer elemento e selecione "Show in print preview". Se o botão desaparecer e o resto da página mantiver as cores, está pronto. Se ele aparecer cinza ou sem borda, o `print-color-adjust` não foi aplicado corretamente.

Uma limitação real desse método: ele não funciona em navegadores muito antigos como Internet Explorer 11. Se seu público inclui usuários de IE, o botão vai aparecer no papel impresso porque o IE não suporta `print-color-adjust`. Nesse caso, a alternativa é usar JavaScript para criar uma versão simplificada da página apenas para impressão, removendo manualmente todos os elementos indesejados antes de chamar `window.print()`. É mais trabalho mas resolve o problema em qualquer navegador. Outra situação onde o código acima falha é quando o botão fica atrás de um modal ou overlay com `z-index` alto. O clique não chega no botão e nada acontece. Verifique se não há nenhuma div com pointer-events fixado no meio do caminho. Eu perdi uma tarde inteira acreditando que o código estava quebrado quando na verdade era um layer de loading do React que estava capturando o clique.

Se quiser algo mais robusto e não tiver restrições de dependências, existe a biblioteca dom-to-print que gera uma versão limpa da página automaticamente. Mas para a maioria dos casos, o código acima com os três ajustes (print-color-adjust, event.preventDefault e z-index) resolve em cerca de 15 minutos, dependendo do tamanho do projeto.