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.
