En este artículo, vamos a explorar tres formas diferentes de hacer que un botón HTML actúe como un enlace.
Estos son los métodos que repasaremos:
- Estilizar un enlace para que parezca un botón.
- Uso de los atributos action y formaction en un formulario.
- Uso del evento onclick de JavaScript.
Pero primero, echemos un vistazo al enfoque erróneo.
¿Por qué no funciona este acceso con el elemento a?
El siguiente fragmento de código lleva al sitio web de freeCodeCamp cuando se hace clic en él.
<a href="https://www.freecodecamp.org/">
<button>freeCodeCamp</button>
</a> Sin embargo, esto no es HTML válido.
El elemento puede envolver párrafos enteros, listas, tablas, etc., incluso secciones enteras, siempre que no haya contenido interactivo dentro (por ejemplo, botones u otros enlaces). - (Fuente: Web Hypertext Application Technology Working Group)
Esto se considera una mala práctica, porque no deja clara la intención del usuario.
Los enlaces deben llevar al usuario a otra parte de la página web o sitio web externo. Los botones se suponen que realizan una acción específica como el envío de un formulario.
Cuando se anida uno dentro de otro, se confunde la acción que se quiere realizar. Por eso es mejor no anidar un botón dentro de una etiqueta de anclaje.
Cómo estilizar un enlace para que parezca un botón con CSS
Este primer modelo no usa el botón en absoluto. Podemos estilizar una etiqueta de anclaje para que parezca un botón usando CSS.
Este es el estilo HTML por defecto para una etiqueta de anclaje.
Podemos añadir una clase a la etiqueta de anclaje y luego utilizar ese selector de clase para estilizar el elemento.
<a class="fcc-btn" href="https://www.freecodecamp.org/">freeCodeCamp</a>
Si, quieres que el enlace abra una nueva página, puedes añadir el atributo target="_blank" de la siguiente manera:
<a target="_blank" class="fcc-btn" href="https://www.freecodecamp.org/">freeCodeCamp</a>
Entonces, podemos añadir un color de fondo y cambiar el color de la fuente así:
.fcc-btn {
background-color: #199319;
color: white;
}
El siguiente paso sería añadir algo de relleno alrededor del texto:
.fcc-btn {
background-color: #199319;
color: white;
padding: 15px 25px;
}
Por último, podemos utilizar la propiedad text-decoration para eliminar el subrayado del texto:
.fcc-btn {
background-color: #199319;
color: white;
padding: 15px 25px;
text-decoration: none;
}
Ahora tenemos una etiqueta de anclaje que parece un botón.
También podemos hacer que el "botón" sea un poco más interactivo, cambiando el color de fondo en función del estado del enlace.
.fcc-btn:hover {
background-color: #223094;
}Podríamos ponernos más exigentes con el diseño, pero esto es sólo para mostrar lo básico de estilizar un enlace como un botón.
También puede optar por utilizar una biblioteca CSS como Bootstrap.
<a class="btn btn-primary" href="https://www.freecodecamp.org/">freeCodeCamp</a>
Si tu proyecto ya incluye Bootstrap, entonces tú puedes usar los estilos de botones incorporados. Pero yo no importaría Bootstrap sólo para dar estilo a un enlace.
¿Cuáles son los problemas de este modelo?
Existe un debate sobre si es una buena práctica estilizar los enlaces como botones. Algunos argumentan que los enlaces siempre deben parecer enlaces y los botones deben parecer botones.
En el libro web titulado Resilient Web Design, Jeremy Keith afirma que
Un material no debe utilizarse como sustituto de otro, ya que de lo contrario el resultado final es engañoso.
¿Por qué me he molestado en plantear este debate?
Mi objetivo no es hacer que elijas un lado del debate en lugar de otro. Sólo quiero que seas consciente de este debate en curso.
Cómo utilizar los atributos action y formaction para hacer un botón en un formulario
Cómo utilizar el atributo de action
Otra alternativa sería anidar el botón dentro de un formulario y utilizar el atributo de acción.
Ejemplo de entrada:
<form action="https://www.freecodecamp.org/">
<input type="submit" value="freeCodeCamp">
</form>Ejemplo de botón:
<form action="https://www.freecodecamp.org/">
<button type="submit">freeCodeCamp</button>
</form>Este sería el estilo de botón por defecto.
Podríamos utilizar los mismos estilos que antes, pero tendríamos que añadir el puntero del cursor y establecer el borde en ninguno, parecido a esto:
.fcc-btn {
background-color: #199319;
color: white;
padding: 15px 25px;
text-decoration: none;
cursor: pointer;
border: none;
}
Cómo utilizar el atributo formaction
De forma similar al enfoque anterior, podemos crear un formulario y utilizar el atributo formaction.
Ejemplo con input:
<form>
<input type="submit" formaction="https://www.freecodecamp.org/" value="freeCodeCamp">
</form>Ejemplo con botón
<form>
<button type="submit" formaction="https://www.freecodecamp.org/">freeCodeCamp</button>
</form>Sólo puedes utilizar el atributo formaction con entradas y botones que tengan type="image" o type="submit".
¿Es esto semánticamente correcto?
Aunque parece ser una solución que funciona, cabe preguntarse si es semánticamente correcta.
Estamos utilizando las etiquetas de formulario, pero esto no funciona como un verdadero formulario. El propósito de un formulario es recoger y enviar los datos del usuario.
Pero estamos utilizando el botón de envío para navegar el usuario a otra página.
En lo que respecta a la semántica, esta no es una buena manera de utilizar las etiquetas de formulario.
Efectos secundarios de la utilización de los atributos action y formaction
Al hacer clic en el botón, ocurre algo interesante con la URL. La URL tiene ahora un signo de interrogación al final.
La razón de este cambio es porque el formulario está utilizando el método GET. Podrías cambiar al método POST, pero podría haber casos en los que eso tampoco sea lo ideal.
<form method="POST" action="https://www.freecodecamp.org/">
<button type="submit">freeCodeCamp</button>
</form>Aunque este modelo es válido para el HTML, tiene un efecto secundario no deseado.
Cómo utilizar el evento onclick de JavaScript para hacer un botón
En los enfoques anteriores, hemos visto soluciones HTML y CSS. Pero también podemos utilizar JavaScript para conseguir el mismo resultado.
Ejemplo con input:
<form>
<input type="button" onclick="window.location.href='https://www.freecodecamp.org/';" value="freeCodeCamp" />
</form>Ejemplo con botón
<button onclick="window.location.href='https://www.freecodecamp.org/';">freeCodeCamp</button>
El location.href representa la ubicación de una URL específica. En este caso, window.location.href devolverá https://www.freecodecamp.org/.
Inconvenientes de este modelo
Aunque esta solución funciona, hay que tener en cuenta algunos problemas potenciales.
Si, el usuario ha decidido desactivar JavaScript en su navegador, es evidente que esta solución no funcionaría. Desgraciadamente, eso podría dar lugar a una mala experiencia de usuario.
Conclusión
El objetivo de este artículo era mostrarte tres formas diferentes de hacer que los botones actúen como enlaces.
El primer modelo fue diseñar un enlace para que se pareciera a un botón. También analizamos el debate sobre si es una buena idea cambiar la apariencia de los enlaces para que se parezcan a otro elemento.
El segundo modelo utilizaba los atributos form y formaction. Pero también aprendimos que este enfoque tiene algunos efectos secundarios con la URL y no es semánticamente correcto.
El tercer modelo utilizaba el evento onclick de JavaScript y el window.location.href. Pero también aprendimos que este modelo podría no funcionar si el usuario decide desactivar, JavaScript en su navegador.
Como desarrollador, es realmente importante analizar los pros y los contras de un determinado modelo antes de incorporarlo a su proyecto.
Espero que haya disfrutado de este artículo y que haya aprendido algunas cosas por el camino.
¡Feliz programación!
Traducido del artículo de Jessica Wilkins - HTML Button Link Code Examples – How to Make HTML Hyperlinks Using the HREF Attribute on Tags