Agregar enlaces a botones HTML es esencial para crear interfaces web interactivas. En este artículo, exploraremos varios métodos, incluidos eventos en línea, atributos de formulario y estilos CSS, junto con ejemplos prácticos y fragmentos de código.
Primero creemos un botón HTML de muestra con estilo básico:
HTML Cree un botón HTML que actúe como el título de un enlace><style>.GFG {ancho:100px; altura: 50 píxeles; fondo: verde; borde: ninguno; color blanco; } estilo> cabeza> <body> <h1>techcodeview.comh1> <button>Haga clic aquí botón> cuerpo> html>></pre> </code> <p dir='ltr'><span>Ahora, exploremos cada método junto con los necesarios.</span> <b> <strong>sintaxis</strong> </b> <span>y</span> <b> <strong>ejemplo</strong> </b> <span>códigos.</span></p> <br><div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-create-dropdown-list-using-javascript">menú desplegable de javascript</a>
</blockquote> <h2><span>Métodos para agregar un enlace a un botón HTML</span></h2><h3> <b> <strong>1. En línea</strong> </b> <b><code class='hljs'> onclick></code></b> <b> <strong>Evento:</strong> </b> </h3><p dir='ltr'><span>El uso de un evento onclick en línea. Asocia una función de JavaScript con el atributo onclick del elemento del botón. Cuando se hace clic, la función redirige al usuario a una URL específica usando window.location.href.</span></p> <p dir='ltr'> <b> <strong>Sintaxis:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/attributeerror-python">error de atributo python</a>
</blockquote> <pre class='hljs'>Click Here></pre><p dir='ltr'> <b> <strong>Ejemplo</strong> </b> <span>: En este ejemplo creamos un botón HTML con estilo CSS. Al hacer clic, redirige al IDE techcodeview.com mediante un evento onclick en línea.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Usando el título del evento al hacer clic en línea><style>.GFG {color de fondo: blanco; borde: 2px negro sólido; color verde; relleno: 5px 10px; cursor: puntero; } estilo> cabeza> <body> <button>Haga clic aquí botón> cuerpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Producción:</strong> </b> </p> <img src='//techcodeview.com/img/picked/45/how-add-link-html-button.webp' alt="BotónEnlace"><p>Salida de ejemplo de evento onclick en línea</p> <h3> <b> <strong>2. Usando la etiqueta del botón en el interior <a>etiqueta:</a> </strong> <a> </a> </b> <a> </a> </h3><p dir='ltr'> <a><span>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 indicada.</span> <b> <strong>Reemplace el siguiente fragmento con el elemento de botón que figura en el código de botón de muestra anterior.</strong> </b> </a> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/kylie-jenner">hermanos kylie jenner</a>
</blockquote> <a> <p dir='ltr'> <b> <strong>Sintaxis:</strong> </b> </p> </a> <pre class='hljs'> Syntax: Example : HTML <html> <head> <title>Cree un botón HTML que actúe como el título de un enlace><style>.GFG {ancho:100px; altura: 50 píxeles; fondo: verde; borde: ninguno; color blanco; } estilo> cabeza> <body> <h1>techcodeview.comh1> <a href='https://ide.techcodeview.com>Haga clic en mea> cuerpo> html> Salida: Uso de la etiqueta Anchor como enlace de botón 4. Uso de etiquetas de formulario Otro enfoque es utilizar el atributo de acción o formación dentro de un elemento. Este método es semánticamente más correcto y funciona bien incluso dentro de formularios. Reemplace el siguiente fragmento en la etiqueta del cuerpo con el elemento del botón que figura en el código de botón de muestra anterior. Haz clic en mí Ejemplo: HTML<html> <head> <title>Cree un botón HTML que actúe como el título de un enlace><style>.GFG {ancho:100px; altura: 50 píxeles; fondo: verde; borde: ninguno; color blanco; } estilo> cabeza> <body> <h1>techcodeview.comh1><form action='https://ide.techcodeview.com> <button type='submit'>Haga clic en botón> formulario> cuerpo> html> Salida: uso de etiquetas de formulario Nota: La salida será la misma para todos los métodos. Salida:></pre></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//changelesschoir.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Categoría</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/java-new-features/">Nuevas Características De Java</a> </li><li> <a href="/linux-file-contents/">Contenido Del Archivo De Linux</a> </li><li> <a href="/alternatives/">Alternativas</a> </li><li> <a href="/microservices/">Microservicios</a> </li><li> <a href="/python-loop-programs/">Programas De Bucle De Python</a> </li><li> <a href="/binary-search-tree/">Árbol de búsqueda binaria</a> </li><li> <a href="/java-networking/">Redes Java</a> </li><li> <a href="/cryptography/">Criptografía</a> </li><li> <a href="/java-jsp/">Java-Jsp</a> </li><li> <a href="/java-instant-class/">Clase Instantánea De Java</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//changelesschoir.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">¿Qué colores forman el rosa? Cómo hacer rosa fácilmente</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> ¿Qué dos colores forman el rosa? Explicamos cómo resaltarlo y ofrecemos consejos para conseguir el tono adecuado.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-colors-make-pink-131104"> <i class="fa fa-external-link"></i> Leer Más</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Artículos De Interés</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/lodash-_-debounce-method">Método Lodash _.debounce()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/10-most-dangerous-jobs-united-states-2024">Los 10 trabajos más peligrosos en Estados Unidos 2024</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/top-10-most-popular-sports-canada">Los 10 deportes más populares de Canadá</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/libra-cancer-compatibility-13184">Compatibilidad Libra y Cáncer: ¿se llevan bien?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-json-array">¿Qué es la matriz JSON?</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Entradas Populares</h2>
<div class="content">
<ul class="list"> <li><a href="/java-try-catch-block">intenta capturar java</a>
</li><li><a href="/what-is-rdbms">rdbms</a>
</li><li><a href="/java-convert-int-string">cómo convertir un número entero a una cadena en java</a>
</li><li><a href="/bucket-sort-algorithm">ordenar cubos</a>
</li><li><a href="/arp-commands">comando de windows arp</a>
</li><li><a href="/java-convert-boolean-string">booleano a cadena java</a>
</li><li><a href="/symmetric-difference-between-two-sets">diferencia simétrica</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Todos Los Derechos Reservados | <a href="//uk.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Descargo De Responsabilidad</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Acerca De Nosotros</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privacidad</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>