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="//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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/python-pip/">Python-Pip</a> </li><li> <a href="/adobe-illustrator/">Adobe Illustrator</a> </li><li> <a href="/get-informed/">Informați-Vă</a> </li><li> <a href="/python-file-handling/">Manipularea Fișierelor-Python</a> </li><li> <a href="/backend-development/">Dezvoltare Backend</a> </li><li> <a href="/directi/">Directi</a> </li><li> <a href="/python-loop-programs/">Programe-Buclă Python</a> </li><li> <a href="/xml-tutorial/">Tutorial Xml</a> </li><li> <a href="/spring-cloud-tutorial/">Tutorial Spring Cloud</a> </li><li> <a href="/microservices-tutorial/">Tutorial Microservicii</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">101 Întrebări grozave cutare sau cutare pentru a vă distra</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Cauți un joc de petrecere ușor? Consultați lista noastră cu cele mai bune întrebări cutare sau cutare.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/101-great-this-that-questions-keep-you-entertained-131400"> <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="/how-install-python-packages-with-requirements">Cum se instalează pachetele Python cu requirements.txt</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/why-is-number-20-called-score">De ce numărul 20 este numit scor?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-turn-off-app-purchases-my-ipad-242108">Cum să dezactivez achizițiile în aplicație pe iPad sau iPhone</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/when-is-march-sat-131582">Când este SAT martie? Ar trebui să-l iei?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/laws-exponents">Legile exponenților</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="/java-convert-int-char">java int la char</a>
</li><li><a href="/python-s-string-formatting">s în python</a>
</li><li><a href="/armstrong-number-c">numărul armstrong</a>
</li><li><a href="/java-convert-string-int">cum se transformă șirul în întreg</a>
</li><li><a href="/java-convert-string-int">parsing string la int</a>
</li><li><a href="/jquery-parent-method">jquery părinte</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="//hr.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>