Este es un pequeño tip que me ha acompañado y que aún he tenido la oportunidad de recomendarlo cuando alquien llega con la duda de como hacer que una imagen, o mas bien dicho, que un elemento de HTML pueda transformarse en un botón y tener las propiedades que dicho elemento de HTML. Para este post tomaré como ejemplo el transformar una imagen en un botón utilizando la tag <BUTTON> y un poco de css, ya dejo en ustedes el realizar pruebas exhaustivas al respecto.
Bueno, pues la mayoria conocemos al elemento <button> que van dentro de un formulario en sus variantes de tipo Submit, Reset y button (sin acción en el formulario), pues resulta que en XHTML podemos contar ahora con el elemento <button> pero ya no como una tag individual sino como una tag que puede enmarcar a otros elementos, en nuestro caso la tag <img> permitiendo siempre tener los atributos estándar y de eventos que posee dicho elemento (referencia w3c: http://www.w3schools.com/tags/tag_button.asp).
Directo al grano entonces:
Para transformar una imagen en un botón, lo que necesitamos es encerrar la tag
<img width="80" src="http://www.fboiton.com/wp-content/plugins/lazy-gallery/lazy-img.php?file=S2020407.JPG&thumb=1" mce_src="http://www.fboiton.com/wp-content/plugins/lazy-gallery/lazy-img.php?file=S2020407.JPG&thumb=1" />
entre la tag button de la siguiente forma:
<button><img width="80" src="http://www.fboiton.com/wp-content/plugins/lazy-gallery/lazy-img.php?file=S2020407.JPG&thumb=1" mce_src="http://www.fboiton.com/wp-content/plugins/lazy-gallery/lazy-img.php?file=S2020407.JPG&thumb=1" /></button>
y obtendremos entonces el siguiente boton :
Ahora bien, si se dan cuenta tenemos un borde, y un fondo el cual le quita la vista a la imagen, es acá donde entra en juego el css ya sea creando una clase y luego asignarsela al boton o, como lo haremos en este caso, aplicar utilizando el atributo «style» de la siguiente forma:
style="margin: 0px; background-color: transparent; border: none;"
dejando el boton así: