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="//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="">Kategorija</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/circles/">Krogi</a> </li><li> <a href="/cbse-class-11-cat/">Cbse – Razred 11</a> </li><li> <a href="/dbms-er-model/">Dbms-Er Model</a> </li><li> <a href="/c-data-types/">Vrste Podatkov C</a> </li><li> <a href="/algorithms-greedy-algorithms/">Algoritmi-Pohlepni Algoritmi</a> </li><li> <a href="/servlet-tutorial/">Vadnica Za Servlet</a> </li><li> <a href="/javascript-object/">Javascript-Predmet</a> </li><li> <a href="/es6-tutorial/">Vadnica Za Es6</a> </li><li> <a href="/cpp-friend/">Cpp-Prijatelj</a> </li><li> <a href="/processes-threads/">Procesi In Niti</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">Kovariacijska matrika</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Kovariančna matrika je kvadratna simetrična matrika, ki se uporablja za opis kovarianc para spremenljivk. Naučite se njegove formule, lastnosti, rešenih primerov in pogostih vprašanj v tem članku.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/covariance-matrix"> <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="/java-convert-string-char">Java Pretvori niz v char</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/get-length-dictionary-python">Pridobite dolžino slovarja v Pythonu</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/understanding-hypothesis-testing">Razumevanje testiranja hipotez</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/linux-list-directories">Imeniki seznama Linux</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/top-10-most-handsome-men-world-2024">Top 10 najbolj lepih moških na svetu 2024</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="/base64-decoding-javascript">dekodiranje js base64</a>
</li><li><a href="/latex-fonts-size-styles">velikost besedila iz lateksa</a>
</li><li><a href="/what-is-full-form-supw">supw</a>
</li><li><a href="/java-switch-statement">java case statement</a>
</li><li><a href="/spring-boot-annotations">opombe v spomladanskem zagonu</a>
</li><li><a href="/chiranjeevi">chiranjeevi igralec</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="//iw.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>