Adăugarea de link-uri la butoanele HTML este esențială pentru crearea interfețelor web interactive. În acest articol, vom explora diverse metode, inclusiv evenimente inline, atribute de formular și stil CSS, împreună cu exemple practice și fragmente de cod.
Să creăm mai întâi un exemplu de buton HTML cu stil de bază:
HTML Creați un buton HTML care acționează ca un titlu de link><style>.GFG { lățime:100px; înălțime: 50px; fundal:verde; chenar:niciuna; culoare albă; } stil> cap> <body> <h1>techcodeview.comh1> <button>Faceți clic aici pe butonul> body> html>>></pre> </code> <p dir='ltr'><span>Acum, să explorăm fiecare metodă împreună cu cele necesare</span> <b> <strong>sintaxă</strong> </b> <span>și</span> <b> <strong>exemplu</strong> </b> <span>coduri.</span></p> <br><div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-string-format">format de șir java lung</a>
</blockquote> <h2><span>Metode pentru a adăuga o legătură la un buton HTML</span></h2><h3> <b> <strong>1. Inline</strong> </b> <b><code class='hljs'> onclick></code></b> <b> <strong>Eveniment:</strong> </b> </h3><p dir='ltr'><span>Utilizarea unui eveniment onclick inline. Asociază o funcție JavaScript cu atributul onclick al elementului buton. Când se dă clic, funcția redirecționează utilizatorul către o adresă URL specificată folosind window.location.href.</span></p> <p dir='ltr'> <b> <strong>Sintaxă:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/mylivecricket-alternatives">livecricket.este</a>
</blockquote> <pre class='hljs'>Click Here></pre><p dir='ltr'> <b> <strong>Exemplu</strong> </b> <span>: În acest exemplu, creăm un buton HTML cu stil CSS. La clic, acesta redirecționează către IDE-ul techcodeview.com folosind un eveniment onclick inline.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Folosind Inline onclick Titlu eveniment><style>.GFG { culoare de fundal: alb; chenar: 2px negru solid; culoare: verde; umplutură: 5px 10px; cursor: pointer; } stil> cap> <body> <button>Faceți clic aici pe butonul> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Ieșire:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-convert-char-string">char în șir java</a>
</blockquote> <img src='//techcodeview.com/img/picked/45/how-add-link-html-button.webp' alt="ButtonLink"><p>Ieșire exemplu de eveniment în linie la clic</p> <h3> <b> <strong>2. Folosind eticheta de buton în interior <a>etichetă:</a> </strong> <a> </a> </b> <a> </a> </h3><p dir='ltr'> <a><span>Această metodă creează un buton în interiorul etichetei de ancorare. Eticheta de ancorare redirecționează pagina web în locația dată.</span> <b> <strong>Înlocuiți fragmentul de mai jos cu elementul de buton din exemplul de cod de buton de mai sus.</strong> </b> </a> </p> <a> <p dir='ltr'> <b> <strong>Sintaxă:</strong> </b> </p> </a> <tag data-text-3=' Syntax: Example : HTML <html> <head> <title>Creați un buton HTML care acționează ca un titlu de link><style>.GFG { lățime:100px; înălțime: 50px; fundal:verde; chenar:niciuna; culoare albă; } stil> cap> <body> <h1>techcodeview.comh1> <a href='https://ide.techcodeview.com>Faceți clic pe mea> body> html> Output : Utilizarea etichetei Anchor ca link Button 4. Utilizarea etichetelor de formular O altă abordare este utilizarea atributului acțiune sau formație în cadrul unui element. Această metodă este mai corectă din punct de vedere semantic și funcționează bine chiar și în interiorul formularelor. Înlocuiți fragmentul de mai jos din eticheta body cu elementul buton din exemplul de cod al butonului de mai sus. Faceți clic pe mine Exemplu: HTML<html> <head> <title>Creați un buton HTML care acționează ca un titlu de link><style>.GFG { lățime:100px; înălțime: 50px; fundal:verde; chenar:niciuna; culoare albă; } stil> cap> <body> <h1>techcodeview.comh1><form action='https://ide.techcodeview.com> <button type='submit'>Faceți clic pe buton> formular> corp> html> Ieșire: Utilizarea etichetelor de formular Notă: Ieșirea va fi aceeași pentru fiecare metodă. Ieșire:>>></tag></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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/linux-system-admin/">Administrator De Sistem Linux</a> </li><li> <a href="/blog/">Blog</a> </li><li> <a href="/python-json-programs/">Programe-Json Python</a> </li><li> <a href="/c-input-output-quiz/">Test C-Input Și Output</a> </li><li> <a href="/backtracking/">Întoarcerea înapoi</a> </li><li> <a href="/pandas-tutorial/">Tutorial Panda</a> </li><li> <a href="/kafka-tutorial/">Tutorial Kafka</a> </li><li> <a href="/ai-blogs/">Bloguri Ai</a> </li><li> <a href="/classroom-resources/">Resurse Pentru Clasă</a> </li><li> <a href="/picked/">Ales</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">Structura de date cu listă legată în C++ cu ilustrație</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Structura de date cu listă legată în C++ cu ilustrație cu introducere, analiză asimptotică, matrice, indicator, structură, listă legată unic, listă dublu legată, grafic, arbore, arbore B+, arbore Avl etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/linked-list-data-structure-c-with-illustration"> <i class="fa fa-external-link"></i> Citeşte Mai Mult</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articole Interesante</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/react-date-picker">React Selector de date</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/can-we-run-siri-android">Putem rula Siri pentru Android?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/find-an-index-of-maximum-occurring-element-with-equal-probability">Găsiți un indice al elementului care apare maxim cu probabilitate egală</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/understanding-hypothesis-testing">Înțelegerea testării ipotezelor</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-do-i-submit-letters-recommendation-1311562">Cum trimit scrisori de recomandare?</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">Posturi Populare</h2>
<div class="content">
<ul class="list"> <li><a href="/php-variables">diferența dintre $ și $$</a>
</li><li><a href="/bedpage-alternatives">site-uri precum bedpage</a>
</li><li><a href="/how-convert-string-json-object-java">convertiți șirul în obiect json</a>
</li><li><a href="/alpha-beta-pruning">exemplu de tăiere alfa beta</a>
</li><li><a href="/what-is-full-form-ctc">ctc formă completă</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 Toate Drepturile Rezervate | <a href="//no.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Declinare A Răspunderii</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Despre Noi</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica De Confidențialitate</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>