Respuesta a partir de 2019:
La mejor manera (en realidad, la única forma *) de simular un evento de clic real usando solo CSS (en lugar de simplemente pasar el cursor sobre un elemento o activar un elemento, donde no tiene mouseUp ) es usar el hack de la casilla de verificación. Funciona adjuntando labela un <input type="checkbox">elemento a través del for=""atributo de la etiqueta .
Esta característica tiene un amplio soporte de navegador (la :checkedpseudoclase es IE9 +).
Aplicar el mismo valor a un <input>atributo 's ID y un acompañamiento <label>' s for=""atributo, y se puede decir que el navegador re-estilo de la etiqueta de clic en la :checkedpseudo-clase, gracias al hecho de que al hacer clic una etiqueta comprobará y desactive la "asociado" <input type="checkbox">.
* Se puede simular un evento "seleccionado" a través de la :activeo :focuspseudo-clase en IE7 + (por ejemplo, para un botón que normalmente es 50pxamplia, puede cambiar su anchura, mientras que active: #btnControl:active { width: 75px; }), pero los que no son verdad "clic" eventos. Están "en vivo" todo el tiempo que se selecciona el elemento (por ejemplo, haciendo Tabbing con su teclado), que es un poco diferente de un evento de clic verdadero, que activa una acción, generalmente mouseUp.
Demostración básica del truco de la casilla de verificación (la estructura básica del código para lo que está pidiendo):
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>
Aquí he colocado la etiqueta justo después de la entrada en mi marcado. Esto es para que pueda usar el selector de hermanos adyacentes (la +tecla) para seleccionar solo la etiqueta que sigue inmediatamente a mi #democasilla de verificación. Dado que la :checkedpseudoclase se aplica a la casilla de verificación, #demo:checked + labelsolo se aplicará cuando la casilla de verificación esté marcada.
Demostración para cambiar el tamaño de una imagen al hacer clic, que es lo que está preguntando:
#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>
Con eso se dice, no es una mala noticia. Debido a que una etiqueta solo puede asociarse con un control de formulario a la vez , eso significa que no puede soltar un botón dentro de las <label></label>etiquetas y llamarlo por día. Sin embargo, nosotros podemos usar un poco de CSS para hacer la mirada etiqueta y se comportan bastante cerca de cómo un botón HTML parece y se comporta.
Demostración para imitar un efecto de clic de botón, más allá de lo que está pidiendo:
#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>
La mayor parte del CSS en esta demostración es solo para diseñar el elemento de etiqueta. Si realmente no necesita un botón , y cualquier elemento antiguo será suficiente, puede eliminar casi todos los estilos en esta demostración, similar a mi segunda demostración anterior.
También se dará cuenta que tengo una propiedad fija allí, -moz-outline-radius. Hace un tiempo, Mozilla agregó esta increíble propiedad no especificada a Firefox, pero la gente de WebKit decidió que , por desgracia, no la agregarán . Considere que la línea de CSS es solo una mejora progresiva para las personas que usan Firefox.
:activefunciona mientras el mouse está abajo. Dependiendo de lo que intente hacer, es posible que pueda hacerlo funcionar utilizando la pseudoclase CSS4:target.