Efeitos CSS Elegantes: Transforme seu Site com Hover!

últimas postagens

A grande maioria dos sítios web contemporâneos emprega folhas de estilo em cascata, mais conhecidas como CSS. Enquanto alguns sítios fazem uso de recursos básicos do CSS, outros exploram funcionalidades mais avançadas para aprimorar a atratividade visual das suas aplicações web.

A incorporação de efeitos visuais chamativos pode impulsionar a taxa de cliques no seu sítio, encorajar os utilizadores a realizar ações específicas, ou até mesmo aumentar o tempo que estes passam no seu sítio.

Neste artigo, vamos abordar a temática dos efeitos de foco em CSS, como podem tornar o seu sítio mais interessante, as formas de implementar esses efeitos e apresentar exemplos de sítios que utilizam efeitos de foco CSS de forma elegante.

O que é o Efeito de Hover em CSS?

O efeito de foco em CSS, ou “hover”, ocorre quando um utilizador do sítio posiciona o cursor do rato sobre um elemento específico. Este movimento pode desencadear uma alteração na cor, no texto, ou noutros efeitos animados. O objetivo principal da adição destes efeitos a um sítio web é intensificar a interatividade e melhorar a sua navegabilidade.

Os efeitos de foco em CSS podem manifestar-se sob a forma de transições ou animações.

Transições

As transições possibilitam a modificação da aparência ou comportamento de um elemento numa página web. No entanto, estas transições requerem um gatilho, como a ação de um utilizador de passar o cursor do rato sobre um elemento. A transição ocorre de um estado inicial para um estado final após o gatilho ser ativado. Uma transição executa-se apenas uma vez e não permite a especificação de pontos intermediários.

Animações

As animações, por outro lado, são baseadas em quadros-chave, que lhes permitem repetir em sentido inverso, executar em loop, e evoluir de um estado inicial para um estado final. Estes efeitos admitem estados intermediários. Um quadro-chave define como os elementos animados devem ser representados em momentos específicos da sequência de animação.

Tipos de Efeitos de Foco CSS

Os efeitos de foco em CSS podem ser aplicados a texto, imagens, vídeos, links ou botões. Abaixo, apresentamos algumas das suas principais aplicações:

#1. Efeitos de Foco em Texto

Estes efeitos são particularmente úteis quando se pretende criar um sítio web com uma estética minimalista. O design deve ser simples, mas eficaz na transmissão da mensagem. Alguns exemplos incluem:

Efeito de Texto de Terminal: Este efeito simula a digitação num processador de texto. As palavras aparecem gradualmente, com uma velocidade adequada para facilitar a leitura por parte dos utilizadores.
Animação de Texto: O texto, neste tipo de efeito, pode surgir deslizando de cima, de baixo ou das laterais.

#2. Efeitos de Foco em Links

Um sítio web típico contém inúmeros hiperlinks que direcionam os utilizadores para diferentes páginas. Com o crescimento do sítio, o número destes links tende a aumentar. Os efeitos de foco em links podem assumir as seguintes formas:

Alteração da Cor do Link: A cor do link pode ser alterada, por exemplo, de azul para vermelho.
Alteração da Cor de Fundo: Este efeito modifica a cor de fundo do link.
Troca de Texto: Este efeito altera o conteúdo do ícone do link.

#3. Efeitos de Foco em Botões

Os botões são elementos essenciais em sítios web, permitindo o envio de formulários e o acesso a diversas secções de uma página web. Os efeitos de foco em botões podem ser implementados através de:

Alteração da Cor do Texto: A cor do texto num botão que diz “Clique aqui” pode mudar de vermelho para verde ao passar o rato por cima.
Alteração da Cor de Fundo: Os botões HTML são transparentes por defeito. Os desenvolvedores podem adicionar uma cor de fundo a estes botões, que pode mudar, por exemplo, de castanho para verde, ao passar o rato.
Efeito de Salto: Pode adicionar um atrativo visual ao botão, fazendo-o saltar ao passar o rato.

#4. Efeitos de Foco em Imagens

Trocar Imagens: Pode criar um carrossel de imagens que se alternam ao passar o rato.
Aparecer/Desaparecer Imagens: Este efeito torna as imagens mais nítidas quando o utilizador passa o rato sobre elas.

Troca de Teste: É comum encontrar sítios web que ocultam descrições nas suas imagens, que apenas se tornam visíveis ao passar o rato. Um sítio de viagens, por exemplo, pode exibir detalhes de um hotel após o utilizador passar o rato sobre a imagem.

De seguida, vamos explorar alguns efeitos de foco CSS elegantes que pode implementar no seu sítio.

Alterar a Cor de Fundo ao Passar o Rato

Este efeito pode ser aplicado a botões, links ou texto exibido numa página web. Quando o cursor do rato entra em contacto com o elemento alvo, a cor de fundo altera-se.

Para alterar a cor de fundo do seu texto, siga estes passos:

Utilize a pseudo-classe :hover para alcançar o efeito desejado.
Crie um elemento, como uma div, um botão ou um link, onde irá implementar o efeito de foco.

Segue um exemplo de código para implementar estes efeitos:

Ficheiro HTML

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
</head>
<body>
  <div>
    Passe o rato e veja-me mudar!!!!!
  </div>
</body>
</html>

Ficheiro CSS

div:hover {
  background-color: rgb(255, 0, 0);
  width: 18rem;
  align-items: center;
  text-align: center;
}

Antes de passar o rato, o resultado será:

Após passar o rato, o resultado será:

Alterar a Cor do Link ao Passar o Rato

Os links são elementos importantes numa página web, pois auxiliam a transição entre páginas. As tags HTML <a> são utilizadas para criar hiperlinks. Alterar a cor do link ao passar o rato aumenta a visibilidade dos mesmos.

Para demonstrar este efeito, é necessário:

Criar uma tag seletora na sua tag <head> ou <body>
Definir a pseudo-classe :hover

Pode utilizar o seguinte código de exemplo para exibir um link que muda de verde para laranja ao passar o rato:

Ficheiro HTML:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
    <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
</head>
<body>
  <div>
    <a href="#">Passe o rato e veja a magia</a>
  </div>
</body>
</html>

Ficheiro CSS:

a:link {
  color: rgb(0, 255, 34);
}
a:hover {
  color: #ff8400;
}

Resultado antes de passar o rato:

Resultado após o efeito hover:

Destaque Deslizante ao Passar o Rato

Quando um utilizador passa o rato sobre um link, este efeito adiciona uma sombra de caixa ao link. A cor do link também é alterada durante o processo. Para obter este efeito, pode seguir os seguintes passos:

Adicione preenchimento (padding) ao redor do link (um valor como 0.25rem pode ser adequado).
Adicione uma margem com um valor similar. Isto evita que o preenchimento interrompa o fluxo do texto.

Segue um exemplo de ficheiro HTML simples:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <a href="#">etechpt.com</a>
  <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
</head>
<body>
</body>
</html>

E este, o seu ficheiro CSS:

a {
  box-shadow: inset 0 0 0 0 rgb(255, 21, 0);
  color: #ff4000;
  padding: 0 .25rem;
  margin: 0 -.25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
  color: #fff;
  box-shadow: inset 200px 0 0 0 #ff4000;;
}
a {
  color: #ff4000;
  font-family: 'Poppins', sans-serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
body {
  display: grid;
}

Antes do efeito hover:

Após o efeito hover:

Sublinhado do Arco-Íris ao Passar o Rato

Este efeito adiciona um sublinhado multicolorido ao texto quando o utilizador passa o rato sobre o mesmo.

Utilize a pseudo-classe linear-gradient para criar uma transição suave entre diferentes cores.
Utilize a pseudo-classe :hover para alcançar o efeito desejado.
Crie um elemento de link onde irá implementar o efeito de foco.

Segue um exemplo de código para implementar o sublinhado do arco-íris ao passar o rato:

Ficheiro HTML:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
    <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
</head>
<body>
  <div>
    <p>Este é um efeito de hover <a href="#">Arco-íris</a> </p>
  </div>
</body>
</html>

Ficheiro CSS:

p {
  max-width: 800px;
  margin: auto 15%;
  line-height: 1.1;
  font-size: 78px;
  font-weight: 700;
  letter-spacing: .0125em;
  color: black;
}
a {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: inherit;
  z-index: 1;
}
a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: .07em;
  height: .1em;
  width: 100%;
  background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959);
  z-index: -1;
  transition: height .25s cubic-bezier(.6,0,.4,1);
}
a:hover::after {
  height: .2em;
}
p {
  font-size: 58px;
}

Antes de passar o rato:

Após passar o rato:

Troca de Texto ao Passar o Rato

A troca de texto ocorre quando o texto é substituído por outro conteúdo ou texto quando o utilizador passa o rato sobre o elemento. Um bom exemplo é quando um sítio tem um link de “comentários”. Ao passar o rato, o texto do link pode mudar para “Adicionar Comentário”.

Para implementar a troca de texto ao passar o rato, necessita do seguinte:

Pseudo-elementos ::before e ::after – Estes criam um elemento separado para o texto que será trocado após passar o rato.
Pseudo-elemento :hover, que altera a posição ou a visibilidade do conteúdo ao passar o rato.

Segue um exemplo de como implementar este efeito:

Ficheiro HTML:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
    <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
</head>
<body>
  <button><span>99 comentários</span></button>
</body>
</html>

Ficheiro CSS:

button { width: 10em }
button { height: 3em }
button:hover span { display: none }
button:hover:before { content: "Adicionar um Comentário" }

Antes de passar o rato:

Após passar o rato:

Sítios com Efeitos de Foco Notáveis

Se procura ideias e inspiração, estes são alguns sítios que pode consultar.

#1. canva

O Canva é um nome de destaque no mundo do design, ajudando pessoas sem experiência em design a criar peças atraentes. Este sítio apresenta efeitos de foco impressionantes, desde a página inicial até às páginas de produtos. Tudo começa com um fundo escuro e desfocado na página inicial, que se torna mais nítido ao passar o rato, tornando as imagens visíveis. Os efeitos de foco também se manifestam ao selecionar diferentes modelos de design.

#2. casa

Haus é um exemplo de sítio que implementa sublinhado ao passar o rato, troca de texto ao passar o rato e alteração da cor de fundo ao passar o rato.

#3. Principais trabalhos

Mainworks utiliza animações e transições nos seus efeitos de foco. Alguns efeitos notáveis incluem a troca de texto ao passar o rato, a alteração da cor do texto e o aumento do tamanho do texto e das imagens ao passar o rato.

Conclusão

A escolha dos efeitos de foco a adicionar ao seu sítio dependerá do tipo de sítio, das suas habilidades, gosto e preferências. Alguns sítios, como plataformas de arte e cupons, podem beneficiar de efeitos de foco mais chamativos. Por outro lado, sítios jurídicos e médicos podem optar por efeitos de foco mais discretos.

É crucial determinar o que melhor se adapta ao seu sítio. No entanto, assegure-se de que estes efeitos estão alinhados com as cores da sua marca. Consulte os nossos melhores recursos de CSS para aprimorar as suas habilidades em CSS.