Cum se creează un buton HTML care acționează ca un link? Când să utilizați elementul Button
Există două abordări pentru a crea un buton pe un site web sub forma unui link. Să ne uităm la fiecare dintre ele în detaliu.
1. Buton sub forma unei imaginiAceasta este cea mai simplă abordare pentru a crea un buton ca link pe un site web. Pentru a face acest lucru, trebuie doar să găsiți o imagine potrivită pentru buton. De exemplu, imaginea cu butonul dvs. se numește button.jpg. Apoi, pentru a crea legătura, codul ar trebui să fie după cum urmează:
...Acesta este ceea ce se transformă pe pagina site-ului:
Aceasta este cea mai de bază opțiune. Vă sfătuiesc să citiți despre etichetă și etichetă pentru a personaliza butonul exact în funcție de cerințele dvs.
Apropo, există un site web special pentru crearea de imagini pentru butoane: http://dabuttonfactory.com/. Aici puteți crea gratuit un buton după gust (setați un stil, selectați o imagine, scrieți textul potrivit etc.).
2. Buton cu folosind HTML etichetăAceastă opțiune este, de asemenea, una dintre metodele de a crea un buton ca link. te aduc eu exemplu elementar butonul creat folosind eticheta și:
... ...Cam așa va arăta pe pagină:
În loc de URL1 și URL2, trebuie să scrieți adresele paginilor unde trebuie să accesați. Dacă doriți ca linkurile să se deschidă în file noi (analog cu atributul target="_blank" al etichetei a), atunci în loc de onclick="javascript:window.location="..."" trebuie să scrieți onclick=" javascript:window.open ="..."" (înlocuiește locația cu deschisă).
Sunt aproape sigur că veți dori să proiectați butonul într-un fel diferit (pentru a se potrivi cu designul site-ului dvs.). Pentru a face acest lucru, introduceți clasa btn:
.btn ( //Sarcina stilul general pentru înălțimea butonului: 30px; culoare-chenar :#c2e254 #9bb838 #9bb838 #c2e254 ; stil bordura: solid; lățime margine: 1px; fundal :#c2e254 ; cursor:pointer; ) .btn:hover ( //Stil buton când cursorul trece peste el border-color :#FFCC66 #FFFF99 #FFFF99 #FFCC66 ; border-style :solid ; border-width :1px ; fundal :#FFFF99 ; ) .btn: focus ( //Stil buton când este focalizat fundal :#ddd ; culoare-chenar :#ddd #333 #333 #ddd ; stil-chenar :solid ; lățime margine :1px ; ) .btn:activ ( //Stil buton când a făcut clic pe fundal :#ff0000 ; border-color :#ddd #333 #ddd ;După aceasta, butonul va arăta astfel pe pagină.
Suport de browser pentru funcțiile CSS3 și cele conexe utilizare activăîn web design, degradeurile, umbrele și rotunjirile au dus la estomparea liniei clare dintre elementele de interfață încorporate și cele „desenate”. De fapt, utilizatorului nu ar trebui să-i pese ce are în fața lui, un link sau un buton, chiar dacă arată exact la fel, pentru că ambele pot fi apăsate. In realitate, utilizare incorectă schimbarea unui element în loc de altul poate duce la o încălcare a înțelegerii logicii site-ului. Cu alte cuvinte, va deveni incomod și incomod pentru vizitatorul site-ului să-l folosească.
Să facem un link și un buton, să le proiectăm în același mod și să vedem cum diferă unul de celălalt în afară de design. În exemplul 1, am inserat eticheta în cod și le-a aplicat clasa de stil de design, încercând în același timp să îndepărteze diferențele, astfel încât aceste două elemente să arate similare între ele, ca niște gemeni.
Exemplul 1. Proiectarea elementelor
HTML5 CSS3 IE Cr Op Sa Fx
Link și butonul .design ( afișare: inline-block; /* Inline block element */ padding: 5px 20px; /* Adăugați câmpuri */ text-decoration: none; /* Eliminați sublinierea din link */ cursor: pointer; / * Cursor manual */ fundal: #deefff /* Fundal pentru browsere care nu acceptă degrade */ /* Gradient */ fundal: -moz-linear-gradient(sus, #deefff 0%, #98bede 100%); fundal: -webkit-gradient (liniar, stânga sus, stânga jos, color-stop (0%, #deefff), color-stop (100%, #98bede)); : -o-linear-gradient(sus, #deefff 0%,#98bede 100%): -ms-linear-gradient(sus, #deefff 0%,#98bede 100%); , #deefff 0%,#98bede 100%) border-radius: 10px /* Round the corners */ border: 1px solid #008 /* Adăugați un chenar albastru */ font: 12px/1 Arial; ; /* Font înlănțuit */ culoare: #2c539e /* Culoare text și link */ )
Iată cum arată în browserul Chrome (Figura 1).
La prima vedere nu există nicio diferență. Ambele elemente sunt aceleași când treceți mouse-ul peste ele, se transformă într-o „mână”. Puteți face clic și așteptați tonul de răspuns. Aici încep lucrurile mărunte unde zace diavolul. Sistematizez diferențele în lucruri mărunte.
- în linia de stare browserul arată adresa link-ului către care duce;
- linkul poate fi deschis într-o fereastră sau filă nouă cu butonul din mijloc al mouse-ului;
- linkul poate fi salvat prin meniul contextual al browserului.
- Când se face clic pe butonul, acesta merge la pagina specificată în atributul de acțiune al etichetei. Desigur, acest lucru funcționează dacă avem un buton încorporat într-un formular. În exemplul de mai sus, puteți chiar să faceți clic pe butonul, dar nu va duce la nimic;
- Puteți atașa o funcție JavaScript la buton, care va face ceva magic pe care un link nu poate.
Se pare că rezultatul clicului pe un buton este imprevizibil, spre deosebire de un link. Aici știm sigur că se va deschide o nouă pagină. În cazul unui buton, se poate deschide o nouă pagină, se poate executa un script sau nu se va întâmpla nimic. În plus, există o confuzie între buton și link. Butonul nostru super-elegant nu seamănă prea mult cu el însuși și pentru a arăta că se poate face clic, adăugăm o proprietate cursor la stiluri cu indicatorul de valoare. Dar acest lucru duce la faptul că butonul este acum perceput ca un link și unii utilizatori încearcă să deschidă un astfel de buton într-o filă nouă, iar acest lucru, desigur, este imposibil.
Ce se poate face pentru a elimina această contradicție. Există mai multe opțiuni.
Textul punctat este prezentat în Fig. 2. Pentru claritate, am mărit ușor dimensiunea fontului.
Orez. 2. Buton cu text subliniat punctat
Din nou, dacă făcând clic pe butonul deschide o altă pagină, linia punctată nu este necesară, deoarece va deruta utilizatorii. Deci metoda 2 este potrivită numai pentru scripturile care efectuează anumite lucrări în cadrul aceleiași pagini.
Aș dori să creez un buton HTML care să acționeze ca link. În acest fel, când faceți clic pe butonul, acesta va redirecționa către pagină. Mi-ar plăcea să fie cât mai accesibil.
De asemenea, aș dori să nu aibă niciun caracter sau parametri suplimentari în URL.
Cum pot realiza acest lucru?
Continua
dar problema este că în Safari și Internet Explorer, adaugă un semn de întrebare la sfârșitul adresei URL. Trebuie să găsesc o soluție care să nu adauge niciun caracter la sfârșitul adresei URL.
Există alte două soluții pentru aceasta: folosind JavaScript sau modelarea unui link pentru a arăta ca un buton.
Folosind JavaScript:
Continua
Dar acest lucru necesită în mod evident JavaScript și, din acest motiv, este mai puțin accesibil cititorilor de ecran. Punct de legătură - accesați o altă pagină. Deci, încercarea de a face un buton să acționeze ca un link este decizie gresita. Sugestia mea este să utilizați un link și să îl stilați astfel încât să arate ca un buton.
Continua
27 de răspunsuri
HTMLSimplu Mod HTML este să-l puneți acolo unde specificați adresa URL țintă dorită în atributul acțiune.
Dacă este necesar, instalați Afișare CSS: în linie; în forma de a-l menţine în flux cu textul din jur. În loc de exemplul de mai sus, puteți utiliza și . Singura diferență este că articolul permite copiilor.
Te-ai aștepta intuitiv să poți folosi , similar elementului dar, din păcate, nu, acest atribut nu există conform specificației HTML.
CSSDacă CSS este permis, utilizați , care doriți să apară ca un buton, folosind, printre altele, proprietatea aspect (suportul pentru browser numai pentru Internet este în prezent (iulie 2015) încă slab).
Accesați Google a.button ( -webkit-aspect: buton; -moz-aspect: buton; aspect: buton; text-decor: niciunul; culoare: initiala; )
Sau alege unul dintre aceste multe biblioteci CSS, cum ar fi Bootstrap.
JavaScriptDacă JavaScript este activat, setați window.location.href .
Dacă aceasta aspect butonul pe care îl cauți eticheta de bază Legături HTML, puteți utiliza Twitter Bootstrap pentru a formata oricare dintre următoarele link-uri/butoane comune tip HTML astfel încât acestea să apară ca un buton. Vă rugăm să rețineți diferențele vizuale dintre versiunile 2, 3 sau 4 ale cadrului:
Butonul Link
Utilizare:
Click pe mine
Din păcate, acest marcaj nu mai este valid în HTML5 și nu se va valida sau nu va funcționa întotdeauna așa cum ar fi posibil. Luați o abordare diferită.
Ca și în cazul HTML5, butoanele acceptă atributul formation. Cel mai bine, nu este nevoie de Javascript sau de înșelăciune.
Accesați Stack Overflow!
Avertizare
Este într-adevăr foarte simplu și fără a folosi niciun element de formular. Puteți folosi doar eticheta folosind butonul din interior :).
Și va încărca href pe aceeași pagină. Vreau să pagina noua? Folosiți doar target="_blank" .
Dacă utilizați un formular intern, adăugați atributul type="reset" împreună cu elementul buton. Acest lucru va împiedica forma să își facă efectul.
www.example.com
Singura modalitate de a face acest lucru (cu excepția ideii ingenioase a lui BalusC!) este să adăugați la buton JavaScript la clic eveniment, care nu este potrivit pentru accesibilitate.
Există dezavantaje în performanță pasii urmatori?
Unde a.nostyle este o clasă care are un stil pentru linkul dvs. (unde puteți scăpa de stilul standard al linkului), iar span.button este o clasă care are un stil pentru „butonul” dvs. (fond, chenar, gradient, etc.).
Mergând împreună cu ce au adăugat alții, puteți înnebuni doar cu o simplă clasă CSS, fără PHP, fără jQuery, doar HTML și CSS.
Creați o clasă CSS și adăugați-o la ancora dvs. Codul este mai jos.
Buton-link (înălțime: 60px; umplutură: 10px 15px; fundal: #4479BA; culoare: #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; chenar: solid 1px #20538D; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); 0, 0, 0, 0.2); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 255, 255, 255, 0,4), 0 1px 1px rgba(0, 0, 0, 0,2); a merge
Asta e tot. Este foarte ușor de făcut și vă permite să fiți atât de creativ pe cât doriți. Controlezi culorile, dimensiunea, formele (raza), etc. Pentru obtinerea Informații suplimentare vezi site-ul unde am gasit asta.
Se pare că există trei soluții la această problemă (toate cu argumente pro și contra).
Soluția 1: Butonul de pe formular. ContinuaDar problema este că în unele versiuni browsere populare precum Chrome, Safari și Internet Explorer, adaugă un semn de întrebare la sfârșitul adresei URL. Deci, cu alte cuvinte, pentru codul de mai sus, adresa URL ar arăta astfel:
Http://someserver/pages2?
Există o modalitate de a remedia acest lucru, dar va necesita o configurație pe partea serverului. Un exemplu de utilizare a Apache Mod_rewrite ar fi redirecționarea tuturor solicitărilor cu un mesaj final? la adresa URL corespunzătoare fără ? . Iată un exemplu de utilizare a .htaccess, dar există un flux complet:
RewriteCond %(THE_REQUEST) \?\ HTTP RewriteRule ^/?(index\.cfm)? /?
Configurațiile similare pot varia în funcție de serverul web utilizat și de stiva utilizată. Deci, un rezumat al acestei abordări:
- Este un buton real, iar din punct de vedere semantic are sens.
- Fără JavaScript, nu necesită stil complex.
- Urmează? arată urât în unele browsere. Acest lucru poate fi rezolvat cu un hack (în unele cazuri) cu folosind POSTîn loc de GET, dar într-un mod curat este o redirecționare pe partea serverului. Dezavantajul unei redirecționări pe server este că va provoca un apel HTTP suplimentar pentru acele linkuri din cauza redirecționării 304.
- Adaugă un element suplimentar
- Poziționarea elementelor atunci când utilizați mai multe forme poate fi dificilă și se înrăutățește atunci când lucrați cu modele receptive. Unele aranjamente pot deveni imposibil de realizat această soluție în funcție de ordinea elementelor. Acest lucru poate avea un impact în cele din urmă asupra gradului de utilizare dacă proiectul este afectat de această problemă.
Puteți folosi JavaScript pentru a declanșa onclick și alte evenimente pentru a simula comportamentul unui link de buton. Exemplul de mai jos ar putea fi îmbunătățit și eliminat din HTML, dar aici este doar pentru a ilustra ideea:
Continua
- Simplu (pentru cerințele de bază) și păstrând semantica fără a necesita formă suplimentară.
- Deoarece este un buton real, acesta va acționa și ca un buton real (de exemplu, comportament de glisare și/sau simula un clic atunci când apăsați bara de spațiu când o acțiune este activă).
- Necesită JavaScript, ceea ce înseamnă mai puțin accesibil. Acest lucru nu este ideal pentru un element de bază (principal), cum ar fi un link.
Dacă doriți să evitați utilizarea unui formular sau a unei intrări și căutați un link către un buton, puteți crea nasturi frumoși folosind un înveliș div, o ancoră și o etichetă h1. S-ar putea să doriți acest lucru, astfel încât să puteți posta liber linkul pe pagina dvs. Acest lucru este util în special pentru butoanele centrate orizontal și cele cu text centrat vertical în interiorul lor. Iată cum:
Buton!
Apoi, în CSS, stilul dvs. ar trebui să arate astfel:
Link-button-wrapper ( lățime: 200px; înălțime: 40px; umbră casetă: inserție 0px 1px 0px 0px #ffffff; chenar-radius: 4px; culoare de fundal: #097BC0; umbră casetă: 0px 2px 4px gri; afișare: bloc; chenar: 1px solid #094BC0; .link-button-wrapper > a (afișare: inline-table; cursor: text-decor: niciunul; înălțime: 100%; .link-button - wrapper > a > h1 ( margine: 0 auto; afișare: celulă-tabel; aliniere verticală: mijloc; culoare: #f7f8f8; dimensiune font: 18px; familie font: cabinregular; aliniere text: centru; )
Link link
Buton, butonul a(poziție:relativ;) butonul a(sus:0;stânga:0;jos:0;dreapta:0;)
@Nicolas, după ce a lucrat pentru mine, ca și tine, nu a existat nici un tip="button" , ceea ce a făcut ca acesta să înceapă să se comporte ca un tip de trimitere. Deoarece am deja un tip submit.it, acest lucru nu a funcționat pentru mine... și acum puteți fie să adăugați o clasă la buton, fie pentru a obține aspectul necesar:
Dacă doriți să creați un buton care este folosit pentru o adresă URL oriunde, creați o clasă de butoane pentru ancora.
A.button (culoare de fundal: #999999; culoare: #FFFFFF !important; cursor: indicator; afișare: bloc inline; greutate font: bold; umplutură: 5px 8px; text-align: center; -webkit-border- raza: 5px;
Știu că au fost trimise multe răspunsuri, dar niciunul dintre ele nu pare să fi abordat problema. Iată abordarea mea față de soluție:
- Utilizați metoda cu care a început OP. Funcționează foarte bine, dar uneori adaugă? la adresa URL. Problema principala este? .
- Utilizați jQuery/JavaScript pentru a executa următorul link atunci când JavaScript este activat, deci? nu este atașat la adresa URL. Se va reveni la metodă fără probleme pentru o proporție foarte mică de utilizatori care nu au JavaScript.
- Codul JavaScript utilizează delegarea evenimentului, astfel încât să puteți atașa un ascultător de evenimente înainte sau . În acest exemplu, folosesc jQuery pentru că este rapid și simplu, dar se poate face în JavaScript „vanilie”.
- Codul JavaScript împiedică acțiunea implicită și apoi urmează linkul specificat în atributul acțiune.
// Asculta pentru orice face clic pe un element din document cu clasa `link` $(document).on("click", ".link", function(e) ( // Preveniți acțiunea implicită (de exemplu, trimiteți formularul) e.preventDefault( ); // Obține adresa URL specificată în forma var url = e.target.parentElement.action; Butoane de formulare ca linkuri Link
Îl folosești, um... ei bine, când vrei să pui un buton pe o pagină pe care utilizatorul poate face clic, nu? Din păcate, lucrurile sunt puțin mai complicate. În principiu, acest lucru este aproape de adevăr, dar haideți să studiem problema mai profund.
Elementul în sine arată astfel:
Fă ceva
Care este cel mai frecvent rezultat al clicului pe ceva de pe un site web? Navigați la o nouă adresă URL ca și cum ați fi făcut clic pe un link ( element ).
Elementul în sine nu poate face acest lucru. S-a vorbit mult despre permiterea „href peste tot”, dar nu a ieșit niciodată din asta.
Când apăsați butonul, real anumite actiuni, dacă se folosește contextul adecvat...
Un buton este un element de formularFormularele web pot conține butoane pentru a efectua (confirma) acțiuni. Ai putea crede că arată cam așa:
Elementul shell, implicit, se comportă exact așa cum se arată mai sus.
Trimite
Cu toate acestea, formularele pot avea și butoane de anulare. Puteți duplica tipul de acțiune al butonului schimbând comportamentul implicit de la efectuarea (confirmarea) acțiunii de anulat:
Resetați
Făcând clic pe acest buton, toate celelalte câmpuri de introducere (și zonele de text) vor fi eliminate din bloc părinte.
Butoanele pot conține conținutMotivul principal pentru utilizarea unui element este că acesta conține atât etichete de deschidere, cât și de închidere (). Aceasta înseamnă că poate fi distins de orice alt cod. În practică, apare adesea următoarea situație:
A confirma
Atâta timp cât persistă, acest conținut mixt va fi afișat pe ecran.
Din câte îmi dau seama, nu există restricții speciale cu privire la ceea ce poți pune în interiorul unui buton, așa că poți pune tot ce vrei acolo, creând niște butoane cu adevărat fanteziste. De asemenea, este posibil să folosiți pseudo elemente.
Să lăsăm totuși subiectul stilurilor deocamdată browsere diferite au de obicei stiluri speciale care se aplică butoanelor. Dacă doriți, puteți păstra stilurile aplicate de browsere sau le puteți elimina complet, iar apoi stilul dvs. implicit va înlocui stilurile browserelor.
Vă rugăm să rețineți: „dacă un buton nu are un href valid, este doar un element”Amintiți-vă, am scris mai devreme că acest subiect îmi face o adevărată plăcere. Acesta este ceea ce m-a inspirat să scriu acest articol. Mi-am imaginat câtă plăcere voi avea să mă uit la diverse incidente. Ca:
M-am săturat deja de aceste butoane.
Cel mai probabil, codul de mai sus înseamnă ceva de genul: voi face clic pe un buton pentru a face ceva cu JavaScript. Oricum, acest lucru pare a fi mai bun decât folosirea celui obișnuit, deoarece aveți posibilitatea de a schimba aspectul cursorului și toate celelalte stiluri în mod implicit.
Afară sunt inutil.
Cu toate acestea, încă pare mai bineChiar dacă nu face nimic în afara , acest element este, după părerea mea, mai bine folosit pentru alte acțiuni care nu necesită accesarea unei alte pagini. Dacă ceva, ele sunt mai bune decât link-urile false.
Amenda. Să introducem ceva JavaScriptAcesta este probabil Cea mai bună decizie. Dacă JavaScript este necesar pentru orice acțiuni legate de clicuri, atunci pentru un element, în principiu, puteți face fără a rula JS.
Dar putem face următoarele:
// 1. Creați un buton var button = document.createElement("button"); button.innerHTML = „Fă ceva”; // 2. Plasează-l var body = document.getElementsByTagName("body"); body.appendChild(button); // 3. Adăugați procesarea butonului de acțiune.addEventListener ("click", function() ( alert("a făcut ceva"); ));
Puteți face cu ușurință un „buton de adăugare” parte a fluxului de lucru JavaScript.
Când este mai bine să folosiți link-uri?Dacă aveți tranziții hipertext către alte pagini, atunci este mai logic să le formatați cu un link, astfel încât să puteți utiliza o ancoră. Chiar dacă îi reutilizați comportamentul prin JavaScript.
Aceasta este o îmbunătățire progresivă în cea mai bună măsură. De exemplu:
- Un buton de căutare va face de obicei rularea scripturilor de căutare Ajax - în timp ce un link poate indica pur și simplu o pagină de căutare;
- Se lansează butonul „publicare”. urmatorul pas publicarea a ceva de care utilizatorul are nevoie - dar linkul poate duce pur și simplu la pagina / publish /;
- Butonul cu o miniatură de imagine deschide un panou separat în care este afișată imaginea marime mai mare— și linkul ar putea fi pur și simplu adresa URL către acea imagine mai mare.
Dacă toate celelalte nu reușesc, inserați un buton cu JavaScript.
Probleme similareS-ar putea să ajungi cu ceva asemănător cu ceea ce am făcut eu!
Sunt bine
Dar tu însuți nu ești încă bine. MDN discută această problemă în detaliu:
Vă rugăm să rețineți: aveți grijă când marcați legăturile cu funcțiile butoanelor. Acțiunile butoanelor sunt de obicei invocate folosind bara de spațiu, în timp ce acțiunile de legătură sunt invocate prin tasta Enter.
De asemenea, va trebui să adăugați o cheie de gestionare a acțiunii care va răspunde la apăsarea barei de spațiu pentru a asigura coerența cu butonul original.
Ei bine, asta-i tot. Și um... fă lucrurile interactive corect.
Traducerea articolului „When To Use The Button Element” a fost pregătită de echipa prietenoasă a proiectului.
Butonul în sine nu poate fi făcut un link HTML interzice combinarea elementelor (precum ) și . Astfel, nu puteți imbrica un buton într-un link sau un link într-un buton. Există trei moduri de a vă asigura că atunci când faceți clic pe un buton, acesta deschide o pagină web.
Folosind HTMLAșezați butonul în interiorul elementului iar pentru formular specificam atributul action cu adresa paginii web (exemplul 1). În plus, puteți adăuga atribut target cu valoarea _blank , apoi pagina web se va deschide într-o nouă filă de browser.
Exemplul 1. atribut de acțiune
Buton Urmăriți linkul
În acest exemplu, făcând clic pe butonul se deschide pagina web new.html într-o filă nouă.
O formă nu poate fi plasată în alta. Înainte de a adăuga un buton, asigurați-vă că aveți un singur formular.
Folosind CSSDeoarece butonul nu poate fi făcut un link, atunci îl abandonăm cu totul și stilăm linkul astfel încât să arate ca un buton. Exemplul 2 arată clasa btn atunci când o adăugați la un element linkul își schimbă designul.
Buton .btn ( display: inline-block; /* Element bloc inline */ fundal: #8C959D; /* Culoare de fundal gri */ culoare: #fff; /* Culoare text alb */ umplutură: 1rem 1.5rem; /* Margini în jurul textului */ text-decoration: none /* Eliminați sublinierea */ border-radius: 3px /* Rotunjiți colțurile */ ) Urmăriți linkul;
Rezultat acest exemplu prezentat în Fig. 1.
Folosind JavaScriptPuteți utiliza evenimentul onclick pentru a naviga la o pagină web specificată, adăugându-l la . În interiorul onclick scriem document.location , iar ca valoare adresa paginii web dorite (exemplul 3). Atenție la combinația de ghilimele; adresa paginii web este inclusă între ghilimele simple.
