07.02.2025

Modificação de Tamanho da Imagem ao Clicar em CSS: Uma Solução

Resposta Rápida

No CSS, você pode implementar um efeito de clique usando a pseudo-classe :active para feedback visual imediato, ou a pseudo-classe :checked para criar um efeito de alternância com uma caixa de seleção invisível.

Clique Imediato usando :active:

.btn:active { 
    /* Quando pressionado, o botão fica azul. Incrível! */
    background: blue; 
}

Efeito de Alternância usando :checked:

<input type="checkbox" id="toggle" hidden>
<label for="toggle" class="btn">Alternar</label>

.btn { 
    /* A cor padrão do botão é cinza. Sem frescuras. */
    background: grey; 
}

/* Se a caixa de seleção estiver marcada, destaque o botão em azul. Uau! */
#toggle:checked + .btn { background: blue; } 

Os exemplos demonstram o uso exclusivo do CSS para criar uma interface de usuário que responde a ações.

Truque da Caixa de Seleção

Para definir um estado persistente, use o truque da caixa de seleção, que envolve usar uma caixa de seleção invisível para manter o estado e um label que serve como o botão para alternar os estados.

Labels como Botões

Você pode estilizar labels para parecerem botões definindo propriedades como background, border-radius e box-shadow:

.btn {
  /* Parece um botão, mas na verdade é um label. Incrível! */
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
  background: grey;
  border-radius: 5px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

#toggle:checked + .btn {
  /* Mudou para azul? Impressionante! */
  background: blue; 
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

Efeitos do Estado Ativo

Torne as interações dos elementos mais dinâmicas aplicando efeitos nas pseudo-classes :active e :focus:

.btn:active {
  /* O botão está pressionado, ele vai voltar? Só tem uma maneira de descobrir! */
  transform: translateY(2px);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
}

.btn:focus {
  /* Quem precisa de filtros de luz azul quando você pode deixar o botão azul claro? */
  outline: none;
  background: lightblue;
}

Use mudanças na largura e altura para :checked para simular o redimensionamento de elementos clicáveis:

#toggle:checked + .btn {
  /* Estamos no País das Maravilhas? Parece que o botão cresceu! */
  width: 200px; 
  height: 60px; 
}

Acessibilidade para Seleção com o Teclado

Para melhorar a acessibilidade, use tabindex para que elementos na página possam ser selecionados com o teclado:

<div tabindex="0">Este elemento é focável, o que é uma alegria para os usuários de teclado!</div>

Pseudo-Class :target

A pseudo-classe :target permite que você destaque elementos de navegação e alterne a visibilidade de conteúdos:

<style>
  #section:target {
    /* Cuidado: se aproximando da seção amarela! */
    background: yellow;
  }
</style>

<a href="#section">Ir para a seção</a>
<div id="section">
  /* Cuidado: o conteúdo abaixo está destacado! */
  A seção destacada fica iluminada quando selecionada.
</div>

Use :target para destacar a seção atual no menu de navegação:

nav a:target {
  /* Um contorno azul envolve o link ativo! */
  outline: solid blue 2px;
}

Lembre-se de que :target funciona com base na URL, afetando o Scroll e o comportamento do botão "voltar" do navegador.

Recursos Úteis

1. :active | CSS-Tricks - Aprenda sobre a pseudo-classe :active para criar efeitos de clique em CSS sem mágica!
2. Pseudo-classes - CSS: Cascading Style Sheets | MDN - Familiarize-se com as pseudo-classes CSS - os novos ajudantes essenciais.
3. Seletores CSS :hover - Descubra o que acontece ao passar o mouse sobre um elemento. O mundo de possibilidades espera por você!
4. O Truque da Caixa de Seleção (e o que você pode fazer com ele) | CSS-Tricks - Quando uma caixa de seleção se torna mais do que apenas uma caixa de seleção? Quando é um truque!
5. É Hora de Começar a Usar Propriedades Personalizadas do CSS - Smashing Magazine - Personalize dinamicamente seus estilos usando propriedades personalizadas do CSS.
6. :not() | Codrops - Entenda como funciona o seletor :not() e filtre estilos indesejados de forma elegante.
7. CSS :target - Alvo, mira e clique :target... é a estilização direcionada certinha!

Video

Navigation