¿Cómo crear un botón HTML que actúe como un enlace?

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" 
    onclick="window.location.href = 'https://ide.geeksforgeeks.org';">
        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 -->
    <a href='https://ide.geeksforgeeks.org/'>
        <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 -->
    <a href="https://ide.geeksforgeeks.org/" class="GFG">
        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 -->
    <form action="https://ide.geeksforgeeks.org/">
        <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

Deja una respuesta Cancelar la respuesta