Hasta ahora, todo lo que has creado es pasivo — el usuario lee, mira, pero no hace nada. Los botones cambian eso. Son la invitación a la interacción, el "haz clic aquí" de la web.
Cada vez que envías un formulario, añades algo al carrito, o confirmas una acción, hay un botón detrás. Son pequeños, pero poderosos.
<button>Crear un botón es sorprendentemente simple:
Eso es todo. Un botón funcional, listo para ser clicado.
Bueno... "funcional" es un decir. Ahora mismo, tu botón no hace nada cuando lo pulsas. Es como un interruptor que no está conectado a ninguna luz. Más adelante, cuando aprendas JavaScript, le darás vida — podrás hacer que muestre mensajes, envíe datos, o cambie la página.
Por ahora, lo importante es que sepas crearlo.
Si pruebas el código anterior, verás un botón bastante... genérico. Gris, pequeño, con bordes redondeados (o no, dependiendo del navegador).
Cada navegador tiene sus propios estilos por defecto para los botones. Chrome los muestra de una forma, Firefox de otra, Safari de otra. No te preocupes — cuando aprendas CSS, podrás darles exactamente la apariencia que quieras.
Aquí viene algo importante que muchos desarrolladores confunden:
Un botón (<button>) es para acciones — enviar un formulario, abrir un menú, ejecutar algo.
Un enlace (<a>) es para navegación — ir a otra página, otra sección, otro sitio.
¿Por qué importa esto? Por semántica y accesibilidad. Los lectores de pantalla anuncian los botones y los enlaces de forma diferente. Los usuarios esperan comportamientos distintos de cada uno. Usar el elemento correcto hace tu web más predecible y accesible.
"Pero quiero que mi enlace parezca un botón" — No hay problema. Con CSS puedes hacer que un enlace se vea exactamente como un botón. La apariencia es flexible; la semántica no debería serlo.
typeLos botones tienen un atributo type que define su comportamiento dentro de formularios:
Por ahora no te preocupes demasiado por esto — lo entenderás mejor cuando aprendas formularios. Solo recuerda que existe.
A diferencia de <img> que es auto-cierre, <button> puede contener cualquier cosa:
Puedes poner emojis, imágenes, iconos, texto — lo que necesites.
Crea una página con al menos dos botones. Uno que diga algo divertido y otro que incluya un emoji.
Los botones esperan ser pulsados. Pronto les darás una razón para existir...