10 snippets CSS e JavaScript personalizados para efeitos de passar o mouse e clicar

Os desenvolvedores podem fazer alguns efeitos malucos com ações simples do usuário, como passar o mouse e clicar no mouse. Eles se referem principalmente a usuários de desktop, mas a web móvel também suporta efeitos de clique/toque na maioria dos navegadores.

Se você está procurando algumas ideias legais para replicar em seus próprios projetos, esta coleção certamente terá algo para você. Qualquer pessoa que conheça um pouco de JavaScript e CSS pode facilmente ajustar esses efeitos para funcionar em qualquer navegador, para qualquer site, e aprimorar a experiência de um layout.

Efeitos de foco do botão

O ponto de partida óbvio para efeitos de animação são os botões CSS. Estes são os mais práticos no uso diário, pois lidam com muita interatividade. Os botões de CTA estão praticamente implorando por atenção e, com esses efeitos de foco, você pode chamar a atenção ainda mais rápido.

Cada efeito usa CSS puro para a animação. Alguns desses botões dependem do JavaScript para os eventos de mouseover, mas todas as animações ainda são controladas diretamente no CSS.

Se você estiver projetando um layout plano, essas animações serão super fáceis de trabalhar.

Navegação paira

Para esta caneta, você encontrará um punhado de eventos de foco de navegação. Eles contam com CSS puro que novamente controla cada hiperlink com um efeito de foco diferente.

Os menus de navegação são geralmente muito simples e genéricos. É por isso que os eventos flutuantes podem realmente apimentar o design e mostrar aos visitantes que você se importa com os pequenos detalhes.

A maioria dessas animações é simples o suficiente para caber em qualquer site, então elas são ótimas para copiar/colar facilmente em qualquer layout.

Efeitos de foto pairando

Com que frequência você encontra galerias de fotos com legendas chatas e sem contexto real? Eu vejo isso com muita frequência, e eles se sentem preguiçosos.

Eu realmente gosto desses efeitos fotográficos que dependem da simples galeria de miniaturas. Ao passar o mouse sobre uma imagem, você verá o título da foto, uma descrição e um botão “leia mais”.

Cada elemento desliza para a vista de diferentes ângulos e ajuda esta galeria de imagens a sair da página.

Dica de ferramenta CSS

Todo navegador suporta dicas de ferramentas padrão, mas você sempre pode criar suas próprias usando plugins ou clonando canetas como esta. Ele foi desenvolvido por Ty Strong e mostra o quão longe você pode levar dicas de ferramentas CSS puras.

Todo esse snippet funciona segmentando a tag HTML <dfn>. Ao passar o mouse sobre qualquer texto envolvido nesta tag, ele aparecerá automaticamente ao passar o mouse, aparecendo como uma dica de ferramenta.

Triângulos CSS puros existem há anos, então é fácil recriar o estilo da dica de ferramenta. Mas estou mais impressionado com os estados de animação suaves, todos controlados por CSS3.

Ícones CSS ao passar o mouse

Aqui está mais um exemplo de algo legal que você pode fazer com CSS puro. Todos esses botões simples têm ícones ocultos que só aparecem quando um cursor pousa em cima deles.

Cada ícone vem do Font Awesome para que você possa replicar este design com ícones totalmente gratuitos.

Os efeitos incluem slide-ins, alongamentos e ícones de desvanecimento que aparecem ao passar o mouse e desaparecem quando o cursor se move para outro lugar.

Paginação Infinita

A paginação da Web é sempre muito chata, provavelmente porque não é uma parte chamativa da interface. Mas com este efeito de paginação de Mariusz Dabrowski você pode levar sua paginação para o próximo nível.

A única coisa sobre esta animação é que ela é feita para carregar de uma página para outra. Portanto, funciona melhor com páginas com Ajax, onde a página inteira não é recarregada. Dessa forma, toda a animação fica visível enquanto o novo conteúdo é carregado.

Definitivamente, tem valor prático limitado, mas o efeito é excelente.

Animação de navegação de sobreposição

Os menus de navegação em tela cheia são muito populares para sites responsivos para dispositivos móveis e também funcionam para a maioria dos usuários. Mas eles não precisam ser chatos ou estáticos quando você tem efeitos de sobreposição como este gratuitamente no CodePen.

O desenvolvedor Ryan Mulligan criou esta animação bestial com quadros-chave CSS puros rodando em uma única classe CSS.

O evento click é acionado via jQuery, mas o movimento é todo CSS. Definitivamente uma das animações mais legais que eu já vi e é surpreendentemente suave para arrancar.

Efeito de clique CSS puro

O material design do Google descreve uma série de efeitos animados e um deles é o efeito de clique ondulado. Isso é mais comum em dispositivos Android, mas também vazou na web.

E com esta caneta você pode replicar o efeito cascata em seu próprio trabalho usando nada além de código CSS.

Este snippet tem como alvo ícones que também acendem quando selecionados, então é um pouco mais como tabular/selecionar elementos de página. Mas os efeitos são transferíveis para qualquer coisa que facilite a clonagem.

Botão de mana

Aqui está um dos efeitos de botão mais exclusivos que já vi usando SVGs para as formas e CSS para a animação.

O codificador Dean Hidri construiu este efeito de botão de mana com apenas 80 linhas de CSS e algumas dúzias de linhas de HTML (com o SVG incluído). Ao passar o mouse, este botão anima uma forma líquida personalizada dentro do botão para criar um preenchimento de fundo e, em seguida, anima depois.

Se você tem um site que pode usar esse estilo de botão, definitivamente vale a pena brincar.

FX de botão icônico

Você pode fazer muito com fontes de ícones e esses botões animados de David Darnes são um ótimo exemplo.

Os ícones animam de uma maneira diferente quando passam o mouse, cada um com seu próprio efeito de assinatura. Você pode não usar todos esses ícones em um site, mas os estilos de animação personalizados são fáceis de clonar. Eles funcionam apenas em CSS3 e se encaixam em qualquer fonte de ícone que você escolher. Um efeito muito divertido de clonar para praticamente qualquer site!

E isso encerra minha lista de efeitos UX, mas essa certamente não é a coleção definitiva.

Se você vasculhar a web, poderá encontrar muitos outros efeitos de foco de botão/ícone e muitos têm código-fonte gratuito. Mas se você quiser saber mais sobre animação da web personalizada, confira nossa enorme lista de plugins e recursos para desenvolvedores.