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).