El botón es uno de los elementos de HTML que puede encontrar con mayor frecuencia en un sitio web. Por lo general, el botón se usa para enviar el formulario, etc. Sin embargo, resulta que la función del botón no es solo esa, además de usarse para enviar o restablecer, el botón también puede usarse como un hipervínculo. ¿Cómo?
Cómo crear enlaces de botón en HTML
Hay varias formas de crear enlaces de botón en HTML. Sin embargo, puedes hacer todas las formas muy fácilmente. Inmediatamente, consulte la explicación a continuación.
1. Crear un enlace de botón
Por supuesto, crear un enlace de botón en HTML es muy fácil. No necesita agregar atributos que no le resulten familiares. Porque para crear un enlace de botón en HTML solo necesita una etiqueta adicional, a saber, la etiqueta , al igual que crea un enlace a una página en particular. Inmediatamente, el siguiente es un ejemplo del uso del script.
<!DOCTYPE html> <html> <head> <title>Contoh Button Link</title> </head> <body> <a href="https://www.nesabamedia.com"><button>Button Dengan Link</button></a> </body> </html>
Primero, cree una etiqueta de botón como lo haría con un botón normal. Luego, antes de la etiqueta del botón, agregue la etiqueta seguida del enlace del sitio web al que desea ir al hacer clic en el botón. Y la etiqueta de cierre debe estar después de la etiqueta . Como en el ejemplo anterior, el botón lo dirigirá al sitio web nesabamedia.com.
La visualización del script anterior se muestra en la imagen a continuación. ¡Buena suerte!
2. Crear un enlace de botón con nueva pestaña
Si desea crear un botón que, al hacer clic, vaya a un enlace con una nueva pestaña, este segundo método es la respuesta. En el primer método, cuando se hace clic en el botón, el enlace en cuestión permanecerá abierto en la página o no se moverá a una nueva pestaña, por lo que si desea volver a la página anterior, primero debe deshacerlo.
Si no quiere la molestia de deshacer, puede hacer que el enlace de destino se abra en una nueva pestaña para que solo tenga que hacer clic en la pestaña sin tener que deshacerlo. El siguiente es un ejemplo del uso del script.
<!DOCTYPE html> <html> <head> <title>Contoh Button Link</title> </head> <body> <a href="https://www.nesabamedia.com" target="_blank"><button>Button Dengan Link & New Tab</button></a> </body> </html>
En realidad, escribir el script es lo mismo que el primer método, es decir, usar la etiqueta , pero la diferencia es que este segundo método tiene atributos adicionales, a saber objetivo=”_en blanco”. Para convertir el enlace en una nueva pestaña, debe agregar este atributo; de lo contrario, su enlace permanecerá en la página.
La siguiente es una visualización de ejemplo del script anterior. Si hace clic en el botón, se abrirá una nueva pestaña de acuerdo con el enlace que está buscando. ¡Buena suerte!
3. Crear enlaces de botones con Javascript
La tercera forma de crear un enlace de botón es usar código javascript. Sin embargo, asegúrese de que su navegador admita javascript; de lo contrario, su botón no funcionará. Inmediatamente, el siguiente es un ejemplo del uso del script.
<!DOCTYPE html> <html> <head> <title>Contoh Button Link</title> </head> <body> <!-- Contoh 1 --> <button onclick="window.location.href="https://www.nesabamedia.com/cara-membuat-button-link-di-html/namafile.html"">Link 1</button> <br><br> <!-- Contoh 2 --> <button onclick="window.location.href="https://nesabamedia.com"">Link 2</button> </body> </html>
Entonces, para crear un enlace de botón con javascript, todo lo que tiene que agregar dentro de la etiqueta
4. Crear enlaces de botones con CSS
Si cree que el enlace del botón tiene el mismo aspecto o parece monótono, puede agregar un script CSS para embellecer el enlace del botón. El siguiente es un ejemplo de un script CSS que puede usar.
<style>
button{
font-family: sans-serif;
font-size: 15px;
background: #22a4cf;
color: white;
border: white 3px solid;
border-radius: 5px;
padding: 12px 20px;
margin-top: 10px;
}
button:hover{
opacity:0.9;
}
</style>Los scripts más utilizados para embellecer los botones son los siguientes:
fondo para dar color al botón color para dar color al texto en el borde del botón para hacer un borde en el borde del botón radio para hacer curvas en el botón relleno para dar la distancia entre las publicaciones y el margen del botón para ajustar la distancia entre el botón y otros elementos
Luego, el siguiente es un ejemplo del script de enlace de botón.
<body> <a href="https://www.nesabamedia.com" target="_blank"> <button class="button">Button Dengan Link & New Tab</button></a> </body>
No necesita agregar una clase al botón, porque solo llama a la etiqueta del botón en su CSS. La siguiente es una visualización de los resultados del script anterior. ¡Buena suerte!
Entonces, este artículo analiza cómo crear enlaces de botón en HTML. Hay varias formas y variaciones que puede utilizar. Por favor, utilice de acuerdo a sus necesidades. Esperemos que este artículo pueda ser útil y útil para usted. Gracias
