Categorías
Diseño Web

Cómo crear botones en HTML y CSS paso a paso

En el diseño web profesional los botones son un elemento principal. Aprende cómo crear tus botones en HTML y CSS paso a paso.

Crear botones en HTML y después darles color con CSS no es una tarea muy difícil. Los botones son una de las piezas fundamentales de cualquier sitio web. Gracias a ellos completamos el proceso de la llamada a la acción. Sin embargo, debido a su versatilidad, podemos usarlos para cualquier cosa. Entre sus ventajas frente al enlace clásico es que “visten” nuestra página y son mucho más vistosos. ¿Quieres tener nociones básicas de cómo crear un botón y evitar instalar más plugins? Vamos a ello.

Primero, crear botones en HTML

Dando vida al botón

Primero tenemos que crear la base. El código para dar vida a nuestro botón es este:

<button></button>

Vista previa:

Rellenando el botón

Ya tenemos nuestro botón activo. Pero si somos sinceros, no es gran cosa. ¿Cómo añadir texto después de crear el botón en HTML? Pues igual que a cualquier elemento HTML, debemos introducir el texto entre las dos etiquetas. Tal que así:

<button>Contacta conmigo</button>

Vista previa:

Enlazando el botón

Como has podido comprobar, es muy sencillo crear un botón. Este código es aplicable a cualquier parte de tu sitio Web. Sin embargo, tu botón debe estar enlazado a un contenido. A continuación, lo vamos a enlazar a un sitio Web, que en este caso, podría ser la Web de contacto. Podemos utilizar simplemente la etiqueta <a> para enlazar el botón.

<a href="https://edgarotero.es/contacto"><button>Contacta conmigo</button></a>

Vista previa:

Ahora decoramos el botón HTML con CSS.

Aplicar estilos CSS a un botón no difiere de aplicarlo a cualquier otro elemento HTML. Aquí van cuatro atributos CSS que te pueden ser útiles:

  • border-radius: Redondear los bordes para hacerlo más amable a la vista.
  • background-color: Cambiar el fondo del botón.
  • color: Cambiarle el color a la tipografía.
  • padding: Para ensanchar el interior del botón.

Este es código que vamos a aplicar a nuestro botón:

<a href="https://eedgarotero.es/contacto"><button style="background-color: red; border-radius:5px; color: white; padding:10px;">Contacta conmigo</button></a>

Vista previa:

Conclusiones

Ahora ya sabes cómo crear tus propios botones. Esta es una guía sencilla, pero evidentemente se pueden hacer maravillas con los botones jugando no sólo con sus aspecto sino con su posición en pantalla. Seguro que te has percatado de que crear botones es muy sencillo y, sin embargo, muy efectivo a la hora de generar una acción por parte de tus visitas. Puedes encontrar una guía muy completa en w3schools.com (en inglés).

Si tienes dudas, puedes dejar un comentario y contactar conmigo. Apoya el blog suscribiéndote.

Únete a otros 50 suscriptores

Por Edgar Otero

Mi nombre es Edgar Otero. Soy informático de profesión. Apasionado de la tecnología y experto en Wordpress, HTML y CSS. Trabajo incansablemente con negocios grandes y pequeños para que su presencia en línea esté a la altura de su competencia. También soy redactor freelance. Toda web merece un gran contenido.