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="/command-prompt/">Símbolo Del Sistema</a> </li><li> <a href="/greedy/">Avaro</a> </li><li> <a href="/uk-gk/">Portero Del Reino Unido</a> </li><li> <a href="/cpp-oops/">Cpp-Oop</a> </li><li> <a href="/data-science/">Ciencia De Los Datos</a> </li><li> <a href="/graph-theory-tutorial/">Tutorial De Teoría De Grafos</a> </li><li> <a href="/linux/">Linux</a> </li><li> <a href="/cpp-containers-library/">Biblioteca-Contenedores-Cpp</a> </li><li> <a href="/backend-development/">Desarrollo Backend</a> </li><li> <a href="/mechanics/">Mecánica</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">Warren Buffett</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Warren Buffett: biografía, edad con la Madre Teresa, Narendra Modi, Mahatma Gandhi, Amitabh Bachchan, Humayun, biografía de Mangal Pandey, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/warren-buffett"> <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="/node-js-tutorial">Tutorial de Node.js</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/ms-excel-definition">Definición de MS Excel</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-scanner-nextdouble-method">Método nextDouble () del escáner Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-completablefuture">¿Qué es CompletableFuture?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/popular-100-german-girl-names">Más de 100 nombres de niñas alemanes populares y sus significados</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-scanner-next-method">escaneo.siguiente java</a>
</li><li><a href="/java-string-equals">.es igual a java</a>
</li><li><a href="/what-is-10-60">10 de 60</a>
</li><li><a href="/c-tutorial">C#</a>
</li><li><a href="/resource-allocation-graph">gráfico de asignación de recursos</a>
</li><li><a href="/java-string-format">cadena.formato en java</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="//lt.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>