Dodajanje povezav na gumbe HTML je nujno za ustvarjanje interaktivnih spletnih vmesnikov. V tem članku bomo raziskali različne metode, vključno z dogodki v vrstici, atributi obrazca in slogom CSS, skupaj s praktičnimi primeri in delčki kode.
Najprej ustvarimo vzorčni gumb HTML z osnovnim slogom:
HTML Ustvarite gumb HTML, ki deluje kot naslov povezave><style>.GFG { širina:100px; višina:50px; ozadje:zeleno; obroba:brez; barva: bela; } slog> glava> <body> <h1>techcodeview.comh1> <button>Kliknite tukaj gumb> telo> html>></pre> </code> <p dir='ltr'><span>Zdaj pa raziščimo vsako metodo skupaj s potrebnimi</span> <b> <strong>sintaksa</strong> </b> <span>in</span> <b> <strong>primer</strong> </b> <span>kode.</span></p> <br><div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/string-concatenation-java">java string append</a>
</blockquote> <h2><span>Metode za dodajanje povezave na gumb HTML</span></h2><h3> <b> <strong>1. V vrstici</strong> </b> <b><code class='hljs'> onclick></code></b> <b> <strong>dogodek:</strong> </b> </h3><p dir='ltr'><span>Uporaba vgrajenega dogodka onclick. Povezuje funkcijo JavaScript z atributom onclick elementa gumba. Ob kliku funkcija preusmeri uporabnika na določen URL z uporabo window.location.href.</span></p> <p dir='ltr'> <b> <strong>Sintaksa:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-tostring-method">metoda tostring</a>
</blockquote> <pre class='hljs'>Click Here></pre><p dir='ltr'> <b> <strong>Primer</strong> </b> <span>: V tem primeru ustvarimo gumb HTML, oblikovan s CSS. Ob kliku se preusmeri na techcodeview.com IDE z vgrajenim dogodkom onclick.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Uporaba Inline onclick Naslov dogodka><style>.GFG { barva ozadja: bela; obroba: 2px polna črna; barva: zelena; oblazinjenje: 5px 10px; kazalec: kazalec; } slog> glava> <body> <button>Kliknite tukaj gumb> telo> html>></pre> </code> <p dir='ltr'> <b> <strong>Izhod:</strong> </b> </p> <img src='//techcodeview.com/img/picked/45/how-add-link-html-button.webp' alt="ButtonLink"><p>Izhod primera dogodka v vrstici onclick</p> <h3> <b> <strong>2. Uporaba oznake gumba v notranjosti <a>oznaka:</a> </strong> <a> </a> </b> <a> </a> </h3><p dir='ltr'> <a><span>Ta metoda ustvari gumb znotraj sidrne oznake. Sidrna oznaka preusmeri spletno stran na dano lokacijo.</span> <b> <strong>Zamenjajte spodnji delček z elementom gumba, podanim v zgornji vzorčni kodi gumba.</strong> </b> </a> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/what-is-username">primer uporabniškega imena</a>
</blockquote> <a> <p dir='ltr'> <b> <strong>Sintaksa:</strong> </b> </p> </a> <pre class='hljs'> Syntax: Example : HTML <html> <head> <title>Ustvarite gumb HTML, ki deluje kot naslov povezave><style>.GFG { širina:100px; višina:50px; ozadje:zeleno; obroba:brez; barva: bela; } slog> glava> <body> <h1>techcodeview.comh1> <a href='https://ide.techcodeview.com>Kliknite mea> body> html> Output : Uporaba oznake Anchor kot povezave gumba 4. Uporaba oznak obrazca Drug pristop je uporaba atributa action ali formaction znotraj elementa. Ta metoda je bolj pomensko pravilna in dobro deluje tudi znotraj obrazcev. Zamenjajte spodnji delček v oznaki body z elementom gumba, podanim v zgornji vzorčni kodi gumba. Kliknite me Primer: HTML<html> <head> <title>Ustvarite gumb HTML, ki deluje kot naslov povezave><style>.GFG { širina:100px; višina:50px; ozadje:zeleno; obroba:brez; barva: bela; } slog> glava> <body> <h1>techcodeview.comh1><form action='https://ide.techcodeview.com> <button type='submit'>Kliknite mebutton> form> body> html> Output : Uporaba oznak obrazca Opomba: rezultat bo enak za vse metode. Izhod:></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="">Kategorija</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/mst/">Mst</a> </li><li> <a href="/software-testing/">Testiranje Programske Opreme</a> </li><li> <a href="/javascript-questions/">Javascript-Vprašanja</a> </li><li> <a href="/java-misc/">Java Razno</a> </li><li> <a href="/how-install/">Kako Namestiti</a> </li><li> <a href="/layout-manager/">Upravitelj Postavitve</a> </li><li> <a href="/shell/">Školjka</a> </li><li> <a href="/discord/">Discord</a> </li><li> <a href="/analysis-of-algorithms/">Analiza algoritmov</a> </li><li> <a href="/picked/">Izbrano</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">bool v C</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Računalniški portal za geeke. Vsebuje dobro napisane, dobro premišljene in dobro razložene članke o računalništvu in programiranju, kvize in vprašanja za prakso/tekmovalno programiranje/razgovor v podjetju.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/bool-c"> <i class="fa fa-external-link"></i> Preberi Več</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Zanimivi Članki</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/chatgpt-playground-what-it-is">ChatGPT Playground: kaj je in kako ga uporabljati</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-an-atx-style-connector">Kaj je konektor v slogu ATX?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/introduction-disjoint-set">Uvod v disjunktno množico (algoritem za iskanje združevanja)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-put-text-over-an-image-google-docs">Kako postaviti besedilo čez sliko v Google Dokumentih</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/soap-vs-rest-web-services">SOAP proti spletnim storitvam REST</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">Priljubljene Objave</h2>
<div class="content">
<ul class="list"> <li><a href="/java-string-isempty">niz je prazen</a>
</li><li><a href="/arp-commands">windows ukaz arp</a>
</li><li><a href="/java-localdate-class">java lokalni datum</a>
</li><li><a href="/what-is-priority-queue">prednostna čakalna vrsta</a>
</li><li><a href="/software-development-life-cycle">življenjski cikel razvoja programske opreme</a>
</li><li><a href="/accuracy_score-sklearn">sklearn ocena natančnosti</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 Vse Pravice Pridržane | <a href="//ro.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Zavrnitev Odgovornosti</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Podjetju</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politika Zasebnosti</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>