Cómo Crear un Botón en HTML

Para crear botones se utiliza la etiqueta <button>. Dentro de ella se coloca el texto o imagen que se mostrará en el botón. Por ejemplo:

<button type="button">Soy un botón</button>

Para darle un nombre, tipo o estado a un botón, se deben agregar los atributos: name, disabled y type.

El atributo name establece el nombre del botón. Se puede utilizar para identificar el elemento en los scripts.

<button type="button" name="popup-button">Soy un botón</button>

El atributo disabled bloquea el acceso al botón.

<button type="button" disabled>Soy un botón bloqueado</button>

El atributo type define el tipo de botón. Se le asigna uno de los tres valores:

• button: valor por defecto. Significa que el elemento es un botón normal. Puede agregar productos al carrito o favoritos, cambiar los deslizadores o cerrar ventanas emergentes.
• submit: se asigna a los botones para enviar un formulario. Cuando el usuario hace clic en un botón de este tipo, el navegador envía los datos del formulario al servidor.
• reset: se agrega a los botones de reinicio de formulario. Cuando el usuario hace clic en este tipo de botón, el navegador devuelve los valores de todos los campos del formulario a su estado inicial.

A veces en un sitio web se encuentran elementos como los botones “Ir al catálogo“, “Leer más” o los botones de las redes sociales (“Compartir“). En realidad, estos son enlaces. Se crean con <a href="">Algún texto</a> y luego se estilizan para que se parezcan a botones. Lee más sobre la etiqueta <a> (anchor).

¿Y Qué Pasa con el input?

Se puede crear un botón usando la etiqueta <input>, si se le indica el tipo button:

<input tupe="button" value="Yo también soy un botón">

Este es un método que funciona. Debes conocerlo, ya que puedes encontrarlo en proyectos. Pero no deberías usarlo tú mismo.

Los botones creados con input tienen limitaciones: es difícil controlar el tamaño y la posición de las imágenes, y tampoco hay pseudoelementos.

Por lo tanto, deja input para crear elementos de formulario, como campos de texto, botones de radio o casillas de verificación. Y crea los botones usando <button>.

Cómo Crear un Botón con un Icono

Veamos tres maneras de crear un botón con un icono.

Usando la etiqueta <img>:

Este método es adecuado para imágenes de contenido.

<button type="button">
  <img src="icon.svg" alt="Icono" width="20" height="20">
</button>

De esta forma puedes agregar botones con emojis, me gusta, no me gusta o cualquier otra cosa. La imagen debe tener un tamaño definido para que el botón reserve espacio y no salte cuando se cargue la imagen.

Agregar SVG en línea a la etiqueta:

Este método es adecuado si la imagen cambia de estado.

El código es sencillo: se escribe la etiqueta <button> y se agrega el código de la imagen SVG.

<button type="button">
  <svg width="30" height="30">
    <path d="..."/>
  </svg>
  Botón simple
</button>

Insertar como fondo en CSS:

Este método es adecuado si el icono tiene un papel decorativo y no cambia al pasar el ratón o hacer clic en el botón. Por ejemplo, en estos casos:

Cómo agregar un icono a un botón:

<button type="button">
  <span class="icon-button"></span>
  Texto del botón
</button> 

.icon-button {
  background-image: url("../images/icon.svg");
  background-size: 90px 97px;
}

El método que elijas dependerá de tus necesidades y de las características del proyecto. También puedes usar diferentes métodos dentro de un mismo proyecto. Por ejemplo, puedes hacer algunos botones con SVG integrado en la etiqueta y otros con una imagen de fondo.

Lee sobre Cómo Insertar SVG Correctamente en HTML.