Botones de diseño con HTML5 y CS3

Si te preguntas como hacer  buenos botones en HTML 5 y CS3 para tu web, este es tu artí­culo. En 3 sencillos pasos tendras estos magní­ficos botones que darán un plus de diseño y usuabilidad a tu web.

Vemos un ejemplo de lo que queremos conseguir:

Ejemplo de botones elegantes con HTML5 y CSS3 (Twitter Bootstrap)

Para conseguir estos botones elegantes y simples, utilizaremos Twitter Bootstrap porque nos ahorrarí  mucho tiempo y conseguiremos un diseño de gran calidad compatible con todos los navegadores.

Veamos paso a paso com crearlos:

1- Descargamos los archivos necesarios y los subimos a nuestro servidor:

– Descarga aquí­

– Asegúrate de que los pones en la carpeta adecuada que enlazaremos desde la página donde pongámos los botones

2- Vinculamos el archivo CSS que hemos descargado con la página donde van los botones:

Inserta esta lí­nea de código antes de la etiqueta </head>:

<link href=»css/bootstrap.css» rel=»stylesheet» type=»text/css» />

Asegurate que la ruta css/bootstrap.css coincide con la ubicación donde has subido tu archivo

3- Creamos un botón y asignamos la clase que queramos para darle el aspecto deseado:

<a class=»btn» href=»http://dissenyaweb.com»>Boton 1</a>

Puedes añadir varias clases una al lado de otra separadas por un espacio. De este modo si por ejemplo queremos un boton azul y grande podemos poner esto:

<a class=»btn btn-info btn-large» href=»http://dissenyaweb.com»>Boton azul y grande</a>

Y listo, en 5 minutos tenemos estos magní­ficos botones.

Cualquier duda no dudéis en dejar un comentario

Gracias


Compartir

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar estas etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>