Kuriant interaktyvias žiniatinklio sąsajas būtina pridėti nuorodas į HTML mygtukus. Šiame straipsnyje mes išnagrinėsime įvairius metodus, įskaitant įtrauktus įvykius, formos atributus ir CSS stilių, kartu su praktiniais pavyzdžiais ir kodo fragmentais.
Pirmiausia sukurkime HTML mygtuko pavyzdį su pagrindiniu stiliumi:
HTML Sukurkite HTML mygtuką, kuris veiktų kaip nuorodos pavadinimas><style>.GFG { plotis: 100 taškų; aukštis: 50px; fonas: žalias; border:none; spalva: balta; } style> head> <body> <h1>techcodeview.comh1> <button>Spustelėkite mygtuką čia> body> html>>></tag> <p dir='ltr'><span>Dabar panagrinėkime kiekvieną metodą kartu su būtinu</span> <b> <strong>sintaksė</strong> </b> <span>ir</span> <b> <strong>pavyzdys</strong> </b> <span>kodai.</span></p> <br><div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/difference-between-mb">skirtumas tarp gigabaito ir megabaito</a>
</blockquote> <h2><span>Metodai, kaip pridėti nuorodą į HTML mygtuką</span></h2><h3> <b> <strong>1. Inline</strong> </b> <b><code class='hljs'> onclick></pre> </code></b> <b> <strong>Renginys:</strong> </b> </h3><p dir='ltr'><span>Eilutinio onclick įvykio naudojimas. Jis susieja „JavaScript“ funkciją su mygtuko elemento „onclick“ atributu. Spustelėjus funkcija nukreipia vartotoją į nurodytą URL naudojant window.location.href.</span></p> <p dir='ltr'> <b> <strong>Sintaksė:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/polymorphism-java">polimorfizmas Java</a>
</blockquote> <tag data-text-3='Click Here></code><p dir='ltr'> <b> <strong>Pavyzdys</strong> </b> <span>: Šiame pavyzdyje sukuriame HTML mygtuką su CSS stiliumi. Spustelėjus jis nukreipia į techcodeview.com IDE, naudodamas tiesioginį onclick įvykį.</span></p>HTML<tag data-text-1=' <html> <head> <title>Naudodami tiesioginį onclick Event title><style>.GFG {fono spalva: balta; kraštinė: 2px vientisa juoda; spalva: žalia; pamušalas: 5px 10px; žymeklis: rodyklė; } style> head> <body> <button>Spustelėkite mygtuką čia> body> html>>></tag> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> </p> <img src='//techcodeview.com/img/picked/45/how-add-link-html-button.webp' alt="ButtonLink"><p>Inline onclick įvykio pavyzdžio išvestis</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/git-checkout">atsiskaitymas su git</a>
</blockquote> <h3> <b> <strong>2. Mygtuko žymės naudojimas viduje <a>žyma:</a> </strong> <a> </a> </b> <a> </a> </h3><p dir='ltr'> <a><span>Šiuo metodu sukuriamas mygtukas inkaro žymos viduje. Inkaro žyma nukreipia tinklalapį į nurodytą vietą.</span> <b> <strong>Pakeiskite toliau pateiktą fragmentą mygtuko elementu, pateiktu aukščiau esančiame mygtuko kodo pavyzdyje.</strong> </b> </a> </p> <a> <p dir='ltr'> <b> <strong>Sintaksė:</strong> </b> </p> </a> <tag data-text-3=' Syntax: Example : HTML <html> <head> <title>Sukurkite HTML mygtuką, kuris veiktų kaip nuorodos pavadinimas><style>.GFG { plotis: 100 taškų; aukštis: 50px; fonas: žalias; border:none; spalva: balta; } style> head> <body> <h1>techcodeview.comh1> <a href='https://ide.techcodeview.com>Spustelėkite mea> body> html> Output : Inkaro žymos naudojimas kaip mygtuko nuoroda 4. Formos žymų naudojimas Kitas būdas yra elemente naudoti veiksmo arba formavimo atributą. Šis metodas semantiškai teisingesnis ir gerai veikia net formų viduje. Pakeiskite toliau pateiktą teksto žymos fragmentą mygtuko elementu, pateiktu aukščiau pateiktame mygtuko kodo pavyzdyje. Spustelėkite mane Pavyzdys: HTML<html> <head> <title>Sukurkite HTML mygtuką, kuris veiktų kaip nuorodos pavadinimas><style>.GFG { plotis: 100 taškų; aukštis: 50px; fonas: žalias; border:none; spalva: balta; } style> head> <body> <h1>techcodeview.comh1><form action='https://ide.techcodeview.com> <button type='submit'>Spustelėkite mebutton> forma> body> html> Output : Formos žymų naudojimas Pastaba: Išvestis bus vienoda kiekvienam metodui. Išvestis:>>></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="">Kategorija</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/interesting-facts/">Įdomūs Faktai</a> </li><li> <a href="/ai-ml-ds-with-python/">Ai-Ml-Ds Su Python</a> </li><li> <a href="/object-oriented-design/">Objektinis Dizainas</a> </li><li> <a href="/chemical-elements/">Cheminiai Elementai</a> </li><li> <a href="/javascript-lodash/">Javascript-Lodash</a> </li><li> <a href="/shortest-path/">Trumpiausias Kelias</a> </li><li> <a href="/geometry/">Geometrija</a> </li><li> <a href="/business/">Verslas</a> </li><li> <a href="/discrete-mathematics/">Diskretioji Matematika</a> </li><li> <a href="/sql/">SQL</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">Atvirkštinė eilutė Python (6 skirtingi būdai)</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Kompiuterių mokslo portalas, skirtas geikams. Jame yra gerai parašyti, gerai apgalvoti ir gerai paaiškinti informatikos ir programavimo straipsniai, viktorinos ir praktikos / konkurencinio programavimo / įmonės interviu klausimai.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/reverse-string-python"> <i class="fa fa-external-link"></i> Skaityti Daugiau</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Įdomios Straipsniai</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/best-algebra-1-regents-review-guide-2023-1311008">Geriausias 2023 m. „Algebra 1 Regents“ apžvalgos vadovas</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-full-form-love">Kas yra visa Meilės forma</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-sys-module">Python sys modulis</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/longest-common-subsequence">Ilgiausia bendra seka (LCS)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/4-sat-sections-what-they-test-1311402">4 SAT skyriai: ką jie tikrina ir kaip gerai padaryti</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">Populiarios Temos</h2>
<div class="content">
<ul class="list"> <li><a href="/lion-vs-tiger">liūtas, palyginti su tigru</a>
</li><li><a href="/objects-classes-java">java objektas</a>
</li><li><a href="/kat-timpf">kat timpf svoris</a>
</li><li><a href="/java-lambda-expressions">lambda funkcija java</a>
</li><li><a href="/gimp-draw-rectangle">gimp stačiakampio piešimas</a>
</li><li><a href="/javascript-example">javascript pavyzdys</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 Visos Teisės Saugomos | <a href="//fi.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atsisakymas</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Apie Mus</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatumo Politika</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>