Wii buttons

Con una imagen, un archivo CSS con su respectivo código y un poco de esfuerzo, podremos crear botones CSS parecidos a los de Nintendo Wii, totalmente compatibles con IE6, IE5.5, IE7, Safari 2, Firefox 2, Opera 9.

Los pasos para crearlo son muy simples, y se ilustran al salto de la página.

Primero, obviamente, deberemos subir la imagen y el archivo CSS a nuestro servidor (Los dos en la misma ubicación, la misma ruta de nuestro servidor), y llamar al archivo CSS desde el documento, es decir, así:

Para Anchor :

Select Code
<a class="button" href="?d=-1"><span>tu texto</span></a&gt


Para botón Form: (Puede ser que quieras usar una detección para saber el navegador), existen dos opciones:

» Para Internet Explorer (y si necesitas varios botones dentro de un Form):

Select Code
<span class="button">
<input  type="submit" name="foo"  value="tu texto" />
</span&gt


» Para los navegadores que no sean Internet Explorer :

Select Code
<span class="button">
<button type="submit" name="foo" value="tu texto">tu texto</button>
</span&gt


Para crear una acción inhabilitada :

Select Code
<del class="button"><span>tu texto</span></del&gt

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!

 
Udemy