Att lägga till länkar till HTML-knappar är viktigt för att skapa interaktiva webbgränssnitt. I den här artikeln kommer vi att utforska olika metoder, inklusive inline-händelser, formulärattribut och CSS-stil, tillsammans med praktiska exempel och kodavsnitt.
Låt oss först skapa ett exempel på HTML-knapp med grundläggande stil:
HTML Skapa en HTML-knapp som fungerar som en länktitel><style>.GFG { width:100px; höjd:50px; bakgrund:grön; border:ingen; färg vit; } stil> huvud> <body> <h1>techcodeview.comh1> <button>Klicka här knappen> body> html>></pre> </code> <p dir='ltr'><span>Låt oss nu utforska varje metod tillsammans med de nödvändiga</span> <b> <strong>syntax</strong> </b> <span>och</span> <b> <strong>exempel</strong> </b> <span>koder.</span></p> <br><div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-convert-string-json-object-java">sträng till jsonobject</a>
</blockquote> <h2><span>Metoder för att lägga till en länk till en HTML-knapp</span></h2><h3> <b> <strong>1. Inline</strong> </b> <b><code class='hljs'> onclick></code></b> <b> <strong>Händelse:</strong> </b> </h3><p dir='ltr'><span>Användningen av en inline onclick-händelse. Den associerar en JavaScript-funktion med knappelementets onclick-attribut. När den klickas omdirigerar funktionen användaren till en angiven URL med hjälp av window.location.href.</span></p> <p dir='ltr'> <b> <strong>Syntax:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-string-replaceall">sträng ersätt allt java</a>
</blockquote> <pre class='hljs'>Click Here></pre><p dir='ltr'> <b> <strong>Exempel</strong> </b> <span>: I det här exemplet skapar vi en HTML-knapp utformad med CSS. Vid klick omdirigerar den till techcodeview.com IDE med hjälp av en inline onclick-händelse.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Använd Inline och klicka på Händelsetitel><style>.GFG { bakgrundsfärg: vit; kant: 2px helt svart; färg: grön; stoppning: 5px 10px; markör: pekare; } stil> huvud> <body> <button>Klicka här knappen> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/picked/45/how-add-link-html-button.webp' alt="ButtonLink"><p>Inline onclick Event Exempel Utdata</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/dijkstras-algorithm">dijkstra</a>
</blockquote> <h3> <b> <strong>2. Använd knapptagg inuti <a>märka:</a> </strong> <a> </a> </b> <a> </a> </h3><p dir='ltr'> <a><span>Denna metod skapar en knapp inuti ankartaggen. Ankartaggen omdirigerar webbsidan till den angivna platsen.</span> <b> <strong>Ersätt kodavsnittet nedan med knappelement som anges i ovanstående exempelknappkod.</strong> </b> </a> </p> <a> <p dir='ltr'> <b> <strong>Syntax:</strong> </b> </p> </a> <pre class='hljs'> Syntax: Example : HTML <html> <head> <title>Skapa en HTML-knapp som fungerar som en länktitel><style>.GFG { width:100px; höjd:50px; bakgrund:grön; border:ingen; färg vit; } stil> huvud> <body> <h1>techcodeview.comh1> <a href='https://ide.techcodeview.com>Klicka på mea> body> html> Output : Använda ankartagg som en knapplänk 4. Använda formulärtaggar Ett annat tillvägagångssätt är att använda attributet action eller formaction inom ett element. Denna metod är mer semantiskt korrekt och fungerar bra även inuti formulär. Ersätt kodavsnittet nedan i body-taggen med knappelementet som anges i ovanstående exempelknappkod. Klicka på mig Exempel : HTML<html> <head> <title>Skapa en HTML-knapp som fungerar som en länktitel><style>.GFG { width:100px; höjd:50px; bakgrund:grön; border:ingen; färg vit; } stil> huvud> <body> <h1>techcodeview.comh1><form action='https://ide.techcodeview.com> <button type='submit'>Klicka på mebutton> form> body> html> Output : Använda formulärtaggar Obs: Utdata kommer att vara samma för alla metoder. Utdata:></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="//spiritscaution.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="">Kategori</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/javascript-es/">Javascript-Es</a> </li><li> <a href="/arithmetic-maq/">Aritmetik - Maq</a> </li><li> <a href="/node-js-fs-module/">Node.js-Fs-Modul</a> </li><li> <a href="/sql-functions/">Sql-Funktioner</a> </li><li> <a href="/money-banking/">Pengar & Bank</a> </li><li> <a href="/computer-graphics/">Datorgrafik</a> </li><li> <a href="/interview-experiences/">Intervjuupplevelser</a> </li><li> <a href="/java-networking/">Java-Nätverk</a> </li><li> <a href="/r-matrix/">R-Matris</a> </li><li> <a href="/coordinate-geometry/">Koordinatgeometri</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="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Hur man gör en komposter i Minecraft</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> En datavetenskapsportal för nördar. Den innehåller välskrivna, genomtänkta och väl förklarade artiklar om datavetenskap och programmering, frågesporter och frågor om praktik/konkurrenskraftig programmering/företagsintervju.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-make-composter-minecraft"> <i class="fa fa-external-link"></i> Läs Mer</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Intressanta Artiklar</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/examples-ai-artificial-intelligence">Exempel på AI-Artificiell intelligens</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/most-important-type-algorithms">Den viktigaste typen av algoritmer</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-loc">Skillnaden mellan loc() och iloc() i Pandas DataFrame</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/constructors-python">Konstruktörer i Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/texas-holdem-rules-everything-you-need-win-1311118">Texas Holdem-regler: Allt du behöver för att vinna</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">Populära Inlägg</h2>
<div class="content">
<ul class="list"> <li><a href="/binary-tree">exempel på binära träd</a>
</li><li><a href="/steps-write-execute-script">gör ett sh-skript körbart</a>
</li><li><a href="/how-split-strings-c">dela strängar c++</a>
</li><li><a href="/bash-split-string">sträng delad bash</a>
</li><li><a href="/how-enable-disable-developer-options-android">stänga av utvecklarläget för Android</a>
</li><li><a href="/how-initialize-list-python">python-initieringslista</a>
</li><li><a href="/java-convert-boolean-string">java boolean till sträng</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 Alla Rättigheter Förbehållna | <a href="//iw.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfriskrivning</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Sekretesspolicy</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>