Cum se adaugă link la butonul HTML?
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> <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> 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> <pre>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> <pre> <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> <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>
</div>
<!-- Article Footer with Prominent Share Buttons -->
<div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
<div class="flex flex-col sm:flex-row items-center justify-between gap-6">
<h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
<i class="fa fa-share-alt text-tech-500"> </i>
Distribuie </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Cum se adaugă link la butonul HTML?&url=https://www.techcodeview.com/ro/how-add-link-html-button"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-twitter text-lg"> </i>
<span class="hidden sm:inline">Twitter </span>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/ro/how-add-link-html-button"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-facebook text-lg"> </i>
<span class="hidden sm:inline">Facebook </span>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/ro/how-add-link-html-button&title=Cum se adaugă link la butonul HTML?"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-linkedin text-lg"> </i>
<span class="hidden sm:inline">LinkedIn </span>
</a>
</div>
</div>
</div>
</article>
<!-- Comments Placeholder / Random Articles -->
<div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
S-Ar Putea Să Vă Placă </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/ro/act-vs-sat-11-key-differences-help-you-pick-right-test-1311422" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/blog/57/act-vs-sat-11-key-differences-help-you-pick-right-test.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="ACT vs SAT: 11 diferențe cheie pentru a vă ajuta să alegeți testul potrivit" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/ro/act-vs-sat-11-key-differences-help-you-pick-right-test-1311422">ACT vs SAT: 11 diferențe cheie pentru a vă ajuta să alegeți testul potrivit </a>
</h4>
</div> <div class="group">
<a href="/ro/ribbon-tabs-excel" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/ms-excel-tutorial/93/ribbon-tabs-excel.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Panglică și file în Excel" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/ro/ribbon-tabs-excel">Panglică și file în Excel </a>
</h4>
</div>
</div>
</div>
</div>
<!-- SECONDARY COLUMN (SIDEBAR) -->
<!-- Aside Column -->
<div class="lg:col-span-4 space-y-8">
<!-- Best Articles Widget -->
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
<span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
Top Articole </h2>
</div>
<!-- Owl Carousel Preserved Container -->
<div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
<!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ro/agile-model">
<img src="https://techcodeview.com/img/software-engineering/79/agile-model.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Model Agil" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ro/agile-model" class="hover:text-tech-500 transition-colors line-clamp-3">Model Agil </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ro/what-are-good-sat-scores-1311074">
<img src="https://techcodeview.com/img/blog/73/what-are-good-sat-scores.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Care sunt scorurile SAT bune pentru colegii? 101 Școli + Sfaturi" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ro/what-are-good-sat-scores-1311074" class="hover:text-tech-500 transition-colors line-clamp-3">Care sunt scorurile SAT bune pentru colegii? 101 Școli + Sfaturi </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ro/introduction-array-implementation-queue">
<img src="https://techcodeview.com/img/goldman-sachs/50/introduction-array-implementation-queue.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Introducerea și implementarea matricei de coadă" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ro/introduction-array-implementation-queue" class="hover:text-tech-500 transition-colors line-clamp-3">Introducerea și implementarea matricei de coadă </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ro/happy-number">
<img src="https://techcodeview.com/img/misc/37/happy-number.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Număr fericit" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ro/happy-number" class="hover:text-tech-500 transition-colors line-clamp-3">Număr fericit </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ro/counting-sort-data-structures">
<img src="https://techcodeview.com/img/counting-sort/51/counting-sort-data-structures.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Counting Sort – Structuri de date și tutoriale de algoritmi" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ro/counting-sort-data-structures" class="hover:text-tech-500 transition-colors line-clamp-3">Counting Sort – Structuri de date și tutoriale de algoritmi </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ro/what-are-ap-classes-why-should-you-take-them-1311092">
<img src="https://techcodeview.com/img/blog/47/what-are-ap-classes-why-should-you-take-them.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ce sunt clasele AP? De ce ar trebui să le iei?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ro/what-are-ap-classes-why-should-you-take-them-1311092" class="hover:text-tech-500 transition-colors line-clamp-3">Ce sunt clasele AP? De ce ar trebui să le iei? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ro/largest-number-in-bst-which-is-less-than-or-equal-to-k">
<img src="https://techcodeview.com/img/tree/91/largest-number-in-bst-which-is-less-than-or-equal-to-k.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cel mai mare număr din BST, care este mai mic sau egal cu k" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ro/largest-number-in-bst-which-is-less-than-or-equal-to-k" class="hover:text-tech-500 transition-colors line-clamp-3">Cel mai mare număr din BST, care este mai mic sau egal cu k </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ro/whats-better-you-131540">
<img src="https://techcodeview.com/img/blog/55/whats-better-you.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ce este mai bine pentru tine: IB sau AP? Ghid de experti ai colegiului" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ro/whats-better-you-131540" class="hover:text-tech-500 transition-colors line-clamp-3">Ce este mai bine pentru tine: IB sau AP? Ghid de experti ai colegiului </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ro/uml-class-diagram">
<img src="https://techcodeview.com/img/uml-tutorial/95/uml-class-diagram.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Diagrama de clasă UML" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ro/uml-class-diagram" class="hover:text-tech-500 transition-colors line-clamp-3">Diagrama de clasă UML </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ro/float-c">
<img src="https://techcodeview.com/img/c-tutorial/67/float-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Plutește în C" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ro/float-c" class="hover:text-tech-500 transition-colors line-clamp-3">Plutește în C </a>
</h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
<!-- Categories -->
<div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Categorie </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/ro/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Blog
</a> <a href="/ro/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Conversie Java
</a> <a href="/ro/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Matematica
</a> <a href="/ro/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Colecții Java
</a> <a href="/ro/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Diferențele
</a> <a href="/ro/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Șir Java
</a>
</div>
<!-- Interesting Articles Widget -->
<div class="mt-8">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Articole Interesante </h2>
</div>
<div id="owl-carousel-4" class="owl-carousel owl-theme">
<!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/chemical-bonding/17/hybridization.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Hibridizare" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ro/chemical-bonding/">Legături Chimice </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/hybridization">Hibridizare </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/operating-system/08/network-operating-system.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Sistem de operare în rețea" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ro/operating-system/">Sistem De Operare </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/network-operating-system">Sistem de operare în rețea </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/blog/98/what-is-thrash.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ce este Thrash?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ro/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/what-is-thrash">Ce este Thrash? </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/maths-class-12/21/vector-projection-formula.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Proiecție vectorială – Formulă, Derivare și Exemple" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ro/maths-class-12-cat/">Matematică-Clasa-12 </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/vector-projection-formula">Proiecție vectorială – Formulă, Derivare și Exemple </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/misc/97/sql-null-functions.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="SQL | Funcții NULL" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ro/misc/">Diverse </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/sql-null-functions">SQL | Funcții NULL </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/get-informed/29/explained-what-is-among-us.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Explicat: Ce este printre noi?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ro/get-informed/">Informați-Vă </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/explained-what-is-among-us-24276">Explicat: Ce este printre noi? </a> </h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
</div>
</div>
</div>
<!-- /Aside Column --> </div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<span class="footer-links">
Copyright ©2026 Toate Drepturile Rezervate |
<a href="//www.techcodeview.com/ar/">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: #0ea5e9; 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: #0284c7; }
`,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>