Blur Effect

Quando você aponta para um botão, os outros desfocam e o olhar vai direto para ele.

Detalhe de interface, 2024

Capturas da página de teste do repositório, com o cursor de verdade.

Para que serve

Detalhes pequenos mostram cuidado. O desafio era destacar a opção certa sem deixar a página mais pesada.

Um efeito feito só com HTML e CSS, sem nenhum código extra. A demonstração nesta página é o efeito funcionando de verdade: passe o mouse ou toque.

Gravação do Blur Effect rodando, a partir do código do repositório: o cursor passa pelos três botões e os outros desfocam.

Funcionando aqui mesmo, com o código do projeto. Passe o mouse ou toque em um botão.

.btns:hover .btn:not(:hover) {
  transform: scale(0.8);
  opacity: 0.8;
  filter: blur(4px);
}