Hasta ahora, hemos visto botones de tipo <input>, que suelen ser los botones apropiados para utilizar en formularios. Sin embargo, también existe otro tipo de botón, que puede ser útil incluso para usar fuera de formularios. Por defecto, este tipo de botones no tiene ninguna funcionalidad, pero podemos darsela mediante Javascript, como veremos más adelante.
La etiqueta <button>
La etiqueta <button> es muy similar a las que ya hemos visto, pero aún más simple. Recordemos que no tiene ninguna funcionalidad por defecto, por lo que sin Javascript sólo podemos hacer lo siguiente:
<button>Saludar</button>
Se trata de un botón «Saludar», que es pulsable, pero que no tiene ninguna funcionalidad, ya que de momento no hemos añadido ningún fragmento de código Javascript.
Este botón sólo podría tener funcionalidad sin Javascript si lo añadimos como último botón en una etiqueta
<form>. De esta forma, automágicamente asumirá el rol de botón para enviar formulario.
Funcionalidad con Javascript
Veamos ahora como podemos añadir un fragmento de Javascript, asociado a ese botón. Normalmente, se le asocia una función Javascript cuando realicemos una acción con el botón, generalmente un click:
<button class="greet">Saludar</button>
const greetButton = document.querySelector(".greet");
function hello() {
alert("Hello!!");
};
greetButton.addEventListener("click", hello);
Hemos establecido una función hello() que se ejecutará cada vez que hagas click en el botón. De esta forma, puedes asignar acciones mediante funciones a eventos especificos (no sólo a clicks de ratón).
Botón desactivado
Añadiendo el atributo disabled podemos indicar al navegador que ese botón debería encontrarse desactivado. Observa los dos botones del fragmento de código siguiente:
<button>Botón activado</button>
<button disabled>Botón desactivado</button>
Intenta evitar añadir clases disabled redundantes, ya que tenemos el atributo estándar con el funcionamiento implementado por defecto. Si quieres cambiarle el estilo, lo explicamos en el siguiente apartado.
Personalizar apariencia
Un botón HTML es un elemento de navegador normal y corriente, por lo que podemos darle estilo simplemente aplicando las propiedades CSS apropiadas para modificar su apariencia.
A continuación tienes un ejemplo donde hemos creado un botón normal, redondeado y un botón desactivado:
<button>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
<path fill="var(--fill, white)"
d="M18.1 15.3c-.1.1-.3.2-.4.3l-2.4.4l1.7 3.6c.2.4 0 .8-.4
1l-2.8 1.3c-.1.1-.2.1-.3.1c-.3 0-.6-.2-.7-.4L11.2
18l-1.9 1.5c-.1.1-.3.2-.5.2c-.4 0-.8-.3-.8-.8V7.5c0-.5.3-.8.8-.8c.2 0
.4.1.5.2l8.7 7.4c.3.2.4.7.1 1M6 12H4V4h16v8h-1.6l2.2 1.9c.8-.3 1.3-1
1.3-1.9V4c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h2z" />
</svg>
Botón activado
</button>
<button disabled>Estoy desactivado</button>
<button class="rounded">Botón redondeado</button>
button {
--color: #1283d1;
--dark-color: color-mix(in srgb, var(--color), black 20%);
--gradient-color: linear-gradient(var(--dark-color), var(--color));
--darker-gradient: linear-gradient(to bottom, #0006, #0008);
--border-color: var(--dark-color);
display: flex;
place-items: center;
padding: 1rem 1.5rem;
margin: 1.5rem;
border: 0;
font-family: Montserrat, sans-serif;
text-shadow: 0 0 6px #0007;
font-size: 1rem;
color: #eee;
background: var(--gradient-color);
box-shadow:
0 7px 0 var(--border-color),
0 8px 3px #0004;
transition: transform 0.25s, box-shadow 0.25s;
& svg {
--size: 24px;
margin-right: 0.5rem;
width: var(--size);
height: var(--size);
button:not([disabled]):active & path {
--fill: #888;
}
}
&.rounded {
border-radius: 10px;
}
&:active:not([disabled]) {
--fill: #888;
color: #888;
background: var(--darker-gradient), var(--gradient-color);
box-shadow: 0 2px 0 var(--border-color), 0 3px 3px #0000004d;
transform: translateY(5px);
}
&[disabled] {
filter: grayscale(1);
cursor: not-allowed;
}
}
Observa que en el código CSS utilizamos características interesantes como CSS Nesting, variables CSS o gradientes CSS.
