Existen varios métodos para crear un botón HTML que actúe como enlace. Algunos de ellos se analizan a continuación:
Nota: agregar la propiedad CSS básica al botón en cada método para que el botón se vea mejor.
- Uso del evento onclick: el atributo de evento onclick funciona cuando el usuario hace clic en el botón. Cuando se hace clic con el mouse en el botón, el botón actúa como un enlace y redirige la página a la ubicación dada.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Create an HTML button that
acts like a link
</
title
>
<!-- Style to create button -->
<
style
>
.GFG {
background-color: white;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
}
</
style
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<!-- Adding link to the button on the onclick event -->
<
button
class
=
"GFG"
Click Here
</
button
>
</
body
>
</
html
>
- Uso de la etiqueta de botón dentro de la etiqueta <a>: este método crea un botón dentro de la etiqueta de anclaje. La etiqueta de anclaje redirige la página web a la ubicación dada.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Create an HTML button that
acts like a link
</
title
>
<!-- Style to create button -->
<
style
>
.GFG {
background-color: white;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
}
</
style
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<!-- Adding button inside the link tag -->
<
button
class
=
"GFG"
>
Click Here
</
button
>
</
a
>
</
body
>
</
html
>
- Agregar estilos como botón a un enlace: este método crea un enlace de etiqueta de anclaje simple y luego aplica alguna propiedad CSS para que sea como un botón.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Create an HTML button that
acts like a link
</
title
>
<!-- Style to create button -->
<
style
>
.GFG {
background-color: white;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
text-decoration:none;
}
</
style
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<!-- Create a normal link and add CSS property -->
Click here
</
a
>
</
body
>
</
html
>
- Uso de etiquetas de formulario: este método utiliza la etiqueta de formulario y la etiqueta de botón. Cuando se hace clic en el botón, se llama al atributo de acción del formulario y la página web se redirige a la ubicación dada.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Create an HTML button that
acts like a link
</
title
>
<!-- Style to create button -->
<
style
>
.gfg {
background-color: white;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
}
</
style
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<!-- Create a form then add button
inside the form -->
<
button
class
=
"gfg"
type
=
"submit"
>
Click Here
</
button
>
</
form
>
</
body
>
</
html
>
Nota: El resultado será el mismo para todos los métodos.
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA