Resposta a partir de 2019:
A melhor maneira (na verdade, a única maneira *) de simular um evento de clique real usando apenas CSS (em vez de passar o mouse sobre um elemento ou torná-lo ativo, onde você não tem mouseUp ) é usar a caixa de seleção hack. Ele funciona anexando a labela um <input type="checkbox">elemento através do for=""atributo do rótulo .
Esse recurso possui amplo suporte ao navegador (a :checkedpseudo classe é o IE9 +).
Aplique o mesmo valor para um <input>'s atributo ID e um acompanhante <label>' s for=""atributo, e você pode dizer ao navegador para re-estilo da etiqueta no clique com o :checkedpseudo-classe, graças ao fato de que, ao clicar uma etiqueta irá verificar e desmarque a "associado" <input type="checkbox">.
* Você pode simular um evento "selecionado" por meio do :activeou :focuspseudo-classe no IE7 + (por exemplo, para um botão que é normalmente 50pxgrande, você pode mudar a sua largura, enquanto active: #btnControl:active { width: 75px; }), mas aqueles que não são verdadeiras "clique" eventos. Eles ficam "ativos" o tempo todo em que o elemento é selecionado (como Tabpressionar o teclado), que é um pouco diferente de um evento de clique real, que aciona uma ação - normalmente - mouseUp.
Demonstração básica do hack da caixa de seleção (a estrutura básica do código para o que você está pedindo):
label {
display: block;
background: lightgrey;
width: 100px;
height: 100px;
}
#demo:checked + label {
background: blue;
color: white;
}
<input type="checkbox" id="demo"/>
<label for="demo">I'm a square. Click me.</label>
Aqui posicionei o rótulo logo após a entrada na minha marcação. Isso é para que eu possa usar o seletor de irmão adjacente (a +tecla) para selecionar apenas o rótulo que segue imediatamente minha #democaixa de seleção. Como a :checkedpseudo-classe se aplica à caixa de seleção, #demo:checked + labelela só será aplicada quando a caixa de seleção estiver marcada.
Demonstração para redimensionar uma imagem ao clicar, e é isso que você está perguntando:
#btnControl {
display: none;
}
#btnControl:checked + label > img {
width: 70px;
height: 74px;
}
<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="http://placekitten.com/200/140" id="btnLeft" /></label>
Com isso dito, não é uma má notícia. Como um rótulo pode ser associado apenas a um controle de formulário por vez , isso significa que você não pode simplesmente soltar um botão dentro das <label></label>tags e chamá-lo por dia. No entanto, nós podemos usar alguns CSS para tornar o rótulo e se comportam bastante perto de como um botão HTML parece e se comporta.
Demonstração para imitar o efeito de clique no botão, acima e além do que você está perguntando:
#btnControl {
display: none;
}
.btn {
width: 60px;
height: 20px;
background: silver;
border-radius: 5px;
padding: 1px 3px;
box-shadow: 1px 1px 1px #000;
display: block;
text-align: center;
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
font-family: arial;
font-size: 12px;
line-height:20px;
}
.btn:hover {
background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}
.btn:active {
margin-left: 1px 1px 0;
box-shadow: -1px -1px 1px #000;
outline: 1px solid black;
-moz-outline-radius: 5px;
background-image: linear-gradient(to top, #f4f5f5, #dfdddd);
}
#btnControl:checked + label {
width: 70px;
height: 74px;
line-height: 74px;
}
<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>
A maior parte do CSS nesta demonstração é apenas para estilizar o elemento label. Se você realmente não precisar de um botão , e qualquer elemento antigo for suficiente, poderá remover quase todos os estilos desta demonstração, semelhante à minha segunda demonstração acima.
Você também notará que eu tenho uma propriedade prefixada lá -moz-outline-radius,. Há algum tempo, a Mozilla adicionou essa incrível propriedade não especificada ao Firefox, mas o pessoal do WebKit decidiu que não a adicionaria , infelizmente. Portanto, considere essa linha de CSS apenas um aprimoramento progressivo para pessoas que usam o Firefox.
:activefunciona enquanto o mouse está pressionado. Dependendo do que você está tentando fazer, você poderá fazê-lo funcionar usando a pseudo classe CSS4:target.