Jak utworzyć przycisk HTML, który działa jak link?


1906

Chciałbym utworzyć przycisk HTML, który działa jak link. Po kliknięciu przycisku następuje przekierowanie na stronę. Chciałbym, aby był jak najbardziej dostępny.

Chciałbym również, aby nie było żadnych dodatkowych znaków ani parametrów w adresie URL.

Jak mogę to osiągnąć?


W oparciu o dotychczasowe odpowiedzi, obecnie robię to:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

ale problem polega na tym, że w Safari i Internet Explorerze dodaje znak zapytania na końcu adresu URL. Muszę znaleźć rozwiązanie, które nie dodaje żadnych znaków na końcu adresu URL.

Istnieją dwa inne rozwiązania: użycie JavaScript lub stylizowanie łącza, aby wyglądało jak przycisk.

Za pomocą JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

Ale to oczywiście wymaga JavaScript i dlatego jest mniej dostępny dla czytników ekranu. Celem linku jest przejście do innej strony. Dlatego próba sprawienia, by przycisk zachowywał się jak link, jest złym rozwiązaniem. Sugeruję, że powinieneś użyć linku i nadać mu styl, aby wyglądał jak przycisk .

<a href="/link/to/page2">Continue</a>

38
Zmień GET na POST. Wydaje się, że nikt nie zajął się pierwszym problemem PO, którym był ?adres URL. Jest to spowodowane tym, że formularz jest type="GET"zmieniony, type="POST"a ?na końcu adresu URL znika. Jest tak, ponieważ GET wysyła wszystkie zmienne w adresie URL, stąd ?.
redfox05

11
@ redfox05 Działa to w kontekście, w którym nie jesteś zdecydowany, którą metodę akceptujesz dla swoich stron. W kontekście, w którym odrzucasz posty na stronach, które oczekują, GETże się nie powiedzie. Nadal uważam, że użycie linku ma sens z zastrzeżeniem, że nie zareaguje on na „spację”, gdy działa podobnie jak przycisk. Również niektóre style i zachowania będą się różnić (np. Przeciągalne). Jeśli chcesz prawdziwego „linku do przycisku”, przekierowanie po stronie serwera na zakończenie adresu URL przez ?usunięcie może być również opcją.
Nicolas Bouvrette

1
cssbuttongenerator.com może się przydać, jeśli chcesz utworzyć przycisk za pomocą css.
śnieg

1
Myślę, że lepiej jest utworzyć link, który wygląda jak przycisk
yasar

1
Uwaga: dla mnie „przycisk działa jak link” oznacza, że ​​mogę kliknąć prawym przyciskiem myszy i zdecydować, czy otworzyć w nowej karcie / oknie, które nie działa z rozwiązaniami JS ...
Betlista

Odpowiedzi:


2102

HTML

Prostym sposobem HTML jest umieszczenie go w miejscu, w <form>którym określasz pożądany docelowy adres URL w actionatrybucie.

<form action="https://google.com">
    <input type="submit" value="Go to Google" />
</form>

Jeśli to konieczne, ustaw CSS display: inline;w formularzu, aby zachować ciągłość tekstu otaczającego. Zamiast <input type="submit">w powyższym przykładzie możesz także użyć <button type="submit">. Jedyną różnicą jest to, że <button>element pozwala dzieciom.

Intuicyjnie spodziewałbyś się, że będziesz mógł używać <button href="https://google.com">analogicznie z <a>elementem, ale niestety nie, ten atrybut nie istnieje zgodnie ze specyfikacją HTML .

CSS

Jeśli CSS jest dozwolony, po prostu użyj <a>stylu, który wygląda jak przycisk, używając między innymi appearancewłaściwości ( nie jest obsługiwany tylko w Internet Explorerze ).

<a href="https://google.com" class="button">Go to Google</a>
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

Lub wybierz jedną z wielu bibliotek CSS, takich jak Bootstrap .

<a href="https://google.com" class="btn btn-primary">Go to Google</a>

JavaScript

Jeśli JavaScript jest dozwolony, ustaw window.location.href.

<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />

Zamiast <input type="button">w powyższym przykładzie możesz także użyć <button>. Jedyną różnicą jest to, że <button>element pozwala dzieciom.


86
Prosty i miły. Świetne rozwiązanie. Dodaj display: inlinedo formularza, aby utrzymać przepływ przycisku.
Pekka

13
w safari dodaje to znak zapytania na końcu adresu ... czy istnieje sposób, aby to nic nie dodać do adresu?
Andrew

11
@BalusC Ładne rozwiązanie, ale jeśli jest w innej formie (formularz nadrzędny), wówczas naciśnięcie tego przycisku powoduje przekierowanie do adresu w atrybucie akcji formularza nadrzędnego.
Vladimir

100
Czy to tylko ja, czy w znaczniku <button> brakuje oczywistego atrybutu href?

14
Wygląda prosto i ładnie, ale może mieć skutki uboczne, jeśli nie zostanie właściwie rozważony. tzn. tworzenie drugiej strony na stronie, zagnieżdżonej itp.
Tejasvi Hegde

596

<button onclick="location.href='http://www.example.com'" type="button">
         www.example.com</button>

Zauważ, że type="button"atrybut jest ważny, ponieważ jego brakującą wartością domyślną jest stan przycisku Prześlij .


1
@pinouchon Powinien działać. sugerowane jest okno. Może to być błąd IE9, stackoverflow.com/questions/7690645/…
Adam

12
Wygląda na to, że jeśli nie podasz typu = "przycisk", nie zawsze będzie to działać. Wygląda na to, że przycisk domyślnie „prześle”
kenitech

58
Jeśli chcesz otworzyć łącze w nowym oknie / karcie, użyj: onclick = "window.open (' example.com', '_ blank' );"
bennos

4
@kenitech poprawny, zgodnie ze specyfikacją : „ Domyślną brakującą wartością jest stan przycisku Prześlij ”.
Niels Keurentjes

4
ale użytkownik nie może kliknąć prawym przyciskiem myszy otworzyć w nowej karcie, aby to zadziałało, potrzebujesz tagu kotwicy
Irshu

433

Jeśli jest to wygląd przycisku, którego szukasz w podstawowym znaczniku zakotwiczenia HTML, możesz użyć frameworka Bootstrap do sformatowania dowolnego z poniższych popularnych łączy / przycisków typu HTML, aby pojawiał się jako przycisk. Zwróć uwagę na różnice wizualne między wersją 2, 3 lub 4 frameworka:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Przykładowy wygląd Bootstrap (v4) :

Przykładowe dane wyjściowe przycisków Boostrap v4

Przykładowy wygląd Bootstrap (v3) :

Przykładowe dane wyjściowe przycisków Boostrap v3

Przykładowy wygląd Bootstrap (v2) :

Przykładowe dane wyjściowe przycisków Boostrap v2


46
Wygląda na przesadną stylizację jednego przycisku, prawda? Za pomocą obramowania, wypełnienia, tła i innych efektów CSS możesz stylizować przyciski i łącza, aby wyglądały podobnie, bez przynoszenia całej ramy. Metodologia stosowana przez Bootstrap jest dobra, jednak użycie Bootstrap wydaje się nadmierne.
scottkellum

150

Posługiwać się:

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

Niestety, ten znacznik nie jest już poprawny w HTML5 i nie będzie sprawdzał poprawności ani nie będzie zawsze działał zgodnie z potencjalnymi oczekiwaniami. Użyj innego podejścia.



3
@Rob: to nie mój problem :) Rzuć to w Meta i zobacz. Jednak targetatrybut jest imo na krawędzi.
BalusC

128

Począwszy od HTML5, przyciski obsługują ten formactionatrybut. Najlepsze jest to, że Javascript nie jest potrzebny.

<form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

Ostrzeżenia

  • Musi być otoczony <form>tagami.
  • <button>typ musi być „prześlij” (lub nieokreślony), nie mogłem go uruchomić z przyciskiem „wpisz”. Co podnosi punkt poniżej.
  • Zastępuje domyślną akcję w formularzu. Innymi słowy, jeśli zrobisz to w innej formie, spowoduje to konflikt.

Odwołanie: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Obsługa przeglądarki: https://developer.mozilla.org/en-US/docs/Web/ HTML / Element / przycisk # Kompatybilność z przeglądarką


5
Tylko w celu uzupełnienia informacji: formactionjest kompatybilny od „ świata IE ” od wersji 10 i nowszych
Luca Detomi

1
@EternalHour Naprawdę ciekawy. W podanych przez nas przykładach powinna istnieć znacząca różnica między zachowaniem tych dwóch form? Czy w tym konkretnym przypadku <button formaction>=== <form action>?
pseudosavant

2
@pseudosavant - Różnica polega na tym, że twoja odpowiedź wymaga działania Javascript. W tym rozwiązaniu nie jest potrzebny Javascript, jest to zwykły HTML.
EternalHour

1
@EternalHour Przepraszam, powinienem był być bardziej jasny. Oczywiście JS sprawia, że ​​mój jest inny, ale jest to tylko progresywne ulepszenie. Formularz nadal przechodzi do tego linku bez JS. Byłem ciekawy zamierzonego zachowania tylko HTML <form>w każdym z naszych przykładów. Jest formactionna zasadzie buttonpowinien dodać ?do pustej składania dostać? W tym JSBin wygląda na to, że HTML zachowuje się dokładnie tak samo dla obu.
pseudosavant

2
Warto zauważyć, że działa to tylko wtedy, gdy są owinięte tagami formularza.
Odkryłem to na własnej skórze

57

To jest naprawdę bardzo proste i bez użycia jakichkolwiek elementów formularza. Możesz po prostu użyć znacznika <a> z przyciskiem wewnątrz :).

Lubię to:

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

I załaduje href na tę samą stronę. Chcesz nową stronę? Po prostu użyj target="_blank".

EDYTOWAĆ

Kilka lat później, gdy moje rozwiązanie nadal działa, pamiętaj, że możesz użyć wielu CSS, aby wyglądało to, co chcesz. To był tylko szybki sposób.


18
Chociaż to działa, nie powinno to być traktowane jako rozwiązanie, ale obejście, ponieważ jeśli przekażesz ten kod za pomocą walidatora W3C, otrzymasz błędy.
Hyder B.

7
Tak, Hyder B. masz rację, ale należy również pamiętać, że standardy są jedynie surowymi wytycznymi. Jako programista zawsze powinieneś myśleć nieszablonowo i wypróbować rzeczy, których nie ma w książce;).
Lucian Minea

NIGDY nie zawijaj innych kotwic lub elementów form-action w Kotwicę.
Roko C. Buljan

Aha i dlaczego tak jest?
Lucian Minea

Powinieneś używać, <button type="button">...aby domyślnie nie działał jako Prześlij
Stephen R

39

Jeśli używasz formularza wewnętrznego, dodaj atrybut type = "reset" wraz z elementem przycisku. Zapobiegnie to akcji formularza.

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>

Tylko jeśli chcesz, aby zresetował formularz. Użyjtype="button"
Stephen R

27
<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>

8
@Robusto to był wredny komentarz na temat pustej przestrzeni, która tam kiedyś była :) To nie jest dobre rozwiązanie IMO, ponieważ nie będzie działać bez JavaScript.
Pekka

1
@Pekka: tak, a także nie jest to nawet dobrze sformatowany xhtml
Sean Patrick Floyd

8
jeśli korzystasz z formularza, po prostu skorzystaj z przesłania, jeśli używasz onclick, po co zawracać sobie głowę formularzem. -1
NimChimpsky

To nie jest dobrze sformatowany HTML. Tag inputnie ma tagu końcowego.
Peter Mortensen

9
@PeterMortensen Według specyfikacji HTML The inputelementem jest nieważna elementem. Musi mieć znacznik początkowy, ale nie może mieć znacznika końcowego.
ghoppe

27

Wydaje się, że istnieją trzy rozwiązania tego problemu (wszystkie z zaletami i wadami).

Rozwiązanie 1: Przycisk w formularzu.

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

Problem polega jednak na tym, że w niektórych wersjach popularnych przeglądarek, takich jak Chrome, Safari i Internet Explorer, dodaje znak zapytania na końcu adresu URL. Innymi słowy, kod powyżej adresu URL będzie wyglądał następująco:

http://someserver/pages2?

Jest jeden sposób, aby to naprawić, ale będzie wymagał konfiguracji po stronie serwera. Jednym z przykładów użycia Apache Mod_rewrite byłoby przekierowanie wszystkich żądań ze znakiem końcowym ?na odpowiadający im adres URL bez ?. Oto przykład używając .htaccess, ale jest pełna wątek tutaj :

RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

Podobne konfiguracje mogą się różnić w zależności od serwera i stosu. Podsumowanie tego podejścia:

Plusy:

  1. To jest prawdziwy przycisk i ma sens semantyczny.
  2. Ponieważ jest to prawdziwy przycisk, będzie również działał jak prawdziwy przycisk (np. Zachowanie podczas przeciągania i / lub naśladuje kliknięcie po naciśnięciu spacji, gdy jest aktywny).
  3. Bez JavaScript, nie wymaga skomplikowanego stylu.

Cons:

  1. Trailing ?wygląda brzydko w niektórych przeglądarkach. Można to naprawić za pomocą włamania (w niektórych przypadkach) przy użyciu POST zamiast GET, ale czystym sposobem jest przekierowanie po stronie serwera. Wadą przekierowania po stronie serwera jest to, że spowoduje dodatkowe wywołanie HTTP dla tych łączy z powodu przekierowania 304.
  2. Dodaje dodatkowy <form>element
  3. Pozycjonowanie elementów przy użyciu wielu formularzy może być trudne, a nawet gorsze w przypadku reagujących projektów. Niektóre układy mogą stać się niemożliwe do osiągnięcia dzięki temu rozwiązaniu, w zależności od kolejności elementów. Może to mieć wpływ na użyteczność, jeśli wyzwanie będzie miało wpływ na projekt.

Rozwiązanie 2: Za pomocą JavaScript.

Możesz użyć JavaScript, aby wywołać kliknięcie i inne zdarzenia naśladujące zachowanie łącza za pomocą przycisku. Poniższy przykład może być ulepszony i usunięty z HTML, ale jest to po prostu zilustrowanie idei:

<button onclick="window.location.href='/page2'">Continue</button>

Plusy:

  1. Prosty (dla podstawowego wymagania) i zachowaj semantyczny, nie wymagając dodatkowej formy.
  2. Ponieważ jest to prawdziwy przycisk, będzie również działał jak prawdziwy przycisk (np. Zachowanie podczas przeciągania i / lub naśladuje kliknięcie po naciśnięciu spacji, gdy jest aktywny).

Cons:

  1. Wymaga JavaScript, co oznacza mniej dostępne. Nie jest to idealne rozwiązanie dla elementu podstawowego (rdzenia), takiego jak łącze.

Rozwiązanie 3: Zakotwicz (link) w stylu przycisku.

Stylowanie linku jak przycisku jest stosunkowo łatwe i może zapewnić podobne wrażenia w różnych przeglądarkach. Bootstrap to robi, ale można go również łatwo osiągnąć samodzielnie, używając prostych stylów.

Plusy:

  1. Prosta (dla podstawowych wymagań) i dobra obsługa wielu przeglądarek.
  2. Nie wymaga <form>pracy.
  3. Nie wymaga JavaScript do działania.

Cons:

  1. Semantyczny jest trochę zepsuty, ponieważ chcesz przycisk, który działa jak łącze, a nie link, który działa jak przycisk.
  2. Nie odtworzy wszystkich zachowań rozwiązania nr 1. Nie będzie obsługiwać takiego samego zachowania jak przycisk. Na przykład linki reagują inaczej po przeciągnięciu. Również wyzwalacz linku „spacja” nie będzie działał bez dodatkowego kodu JavaScript. Zwiększy to złożoność, ponieważ przeglądarki nie są spójne ze sposobem obsługi keypresszdarzeń na przyciskach.

Wniosek

Rozwiązanie nr 1 ( przycisk w formularzu ) wydaje się najbardziej przejrzyste dla użytkowników przy minimalnym nakładzie pracy. Jeśli ten wybór nie ma wpływu na twój układ, a poprawa po stronie serwera jest możliwa, jest to dobra opcja w przypadkach, w których dostępność ma najwyższy priorytet (np. Linki na stronie błędu lub komunikaty o błędach).

Jeśli JavaScript nie stanowi przeszkody w spełnieniu wymagań dotyczących dostępności, wówczas rozwiązanie nr 2 ( JavaScript ) byłoby preferowane w stosunku do nr 1 i nr 3.

Jeśli z jakiegoś powodu dostępność jest niezbędna (JavaScript nie jest opcją), ale jesteś w sytuacji, gdy twój projekt i / lub konfiguracja serwera uniemożliwia ci skorzystanie z opcji nr 1, a następnie rozwiązania nr 3 ( Kotwica w stylu przycisku ) jest dobrą alternatywą dla rozwiązania tego problemu przy minimalnym wpływie na użyteczność.


21

Dlaczego nie po prostu umieścić przycisku wewnątrz znacznika referencyjnego, np

<a href="https://www.google.com/"><button>Next</button></a>

Wydaje się, że działa to idealnie dla mnie i nie dodaje żadnych tagów% 20 do linku, tak jak tego chcesz. Użyłem linku do Google, aby to zademonstrować.

Można oczywiście owinąć to tagiem formularza, ale nie jest to konieczne.

Podczas łączenia innego pliku lokalnego po prostu umieść go w tym samym folderze i dodaj nazwę pliku jako odniesienie. Lub określ lokalizację pliku, jeśli in nie znajduje się w tym samym folderze.

<a href="myOtherFile"><button>Next</button></a>

Nie powoduje to również dodania żadnego znaku na końcu adresu URL, jednak ma ścieżkę projektu pliku jako adres URL przed zakończeniem z nazwą pliku. na przykład

Jeśli struktura mojego projektu była ...

.. oznacza folder - oznacza plik, podczas gdy cztery | oznacz podkatalog lub plik w folderze nadrzędnym

..publiczny
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html

Gdybym otworzył main.html adres URL byłby,

http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah

Jednak gdy kliknę przycisk wewnątrz main.html, aby zmienić na wtórny.html, adres URL będzie:

http://localhost:0000/public/html/secondary.html 

Brak znaków specjalnych na końcu adresu URL. Mam nadzieję, że to pomoże. Nawiasem mówiąc - (% 20 oznacza spację w adresie URL, która jest zakodowana i wstawiona w ich miejsce).

Uwaga: Localhost: 0000 oczywiście nie będzie 0000, będziesz miał tam swój własny numer portu.

Ponadto? _Ijt = xxxxxxxxxxxxxx na końcu adresu URL main.html, x jest określane przez twoje własne połączenie, więc oczywiście nie będzie równe mojemu.


Może się wydawać, że podam kilka naprawdę podstawowych punktów, ale chcę tylko wyjaśnić jak najlepiej. Dziękuję za przeczytanie i mam nadzieję, że ta pomoc przynajmniej komuś pomoże. Miłego programowania.


20

Możesz po prostu umieścić znacznik wokół elementu:

<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/


10
Nie możesz. HTML zabrania zagnieżdżania się w <button>środku <a>.
Quentin

5
Jest to w zasadzie to samo co ta odpowiedź sprzed lat .
Quentin

2
Jeśli to zabrania, to dlaczego działa? :) Żaden poważny programista nie bierze pod uwagę wszystkiego, co mówi weryfikator W3C ... spróbuj przejść przez Facebooka, Google'a lub jakąkolwiek dużą stronę internetową ... Internet nie czeka na nikogo
Uriahs Victor

3
@UriahsVictor Może to działać dzisiaj, ale pewnego dnia dostawcy przeglądarki mogą zdecydować o zmianie zachowania, ponieważ jest ono nieprawidłowe.
Jacob Alvarez

2
@UriahsVictor Aplety Flash i Java również były dość powszechne.
Jacob Alvarez

17

Jedynym sposobem na to (oprócz genialnego pomysłu BalusC!) Jest dodanie onclickdo przycisku zdarzenia JavaScript , co nie jest dobre dla dostępności.

Czy zastanawiałeś się nad stylizowaniem zwykłego łącza jak przycisku? W ten sposób nie można uzyskać przycisków specyficznych dla systemu operacyjnego, ale nadal jest to najlepszy sposób IMO.


Myślę, że mówi on nie tylko o funkcjonalności (kliknięciu), ale także o wyglądzie.

1
@ Logika internetowa tak, właśnie dlatego mówię o stylizacji linku, aby wyglądał jak przycisk.
Pekka

6
@ChrisMarisic jest wiele wad korzystania z onClick: nie działa przy wyłączonym JS; użytkownik nie może otworzyć linku w nowej karcie / oknie ani skopiować go do schowka w celu udostępnienia; parsery i boty nie będą w stanie rozpoznać i podążać za linkiem; przeglądarki z funkcją „pobierania wstępnego” nie rozpoznają linku; i wiele więcej.
Pekka

2
Chociaż są to ważne punkty, nie sądzę, że tak naprawdę dotyczą one dostępności. Miałeś na myśli użyteczność, a nie dostępność? W projektowaniu stron internetowych dostępność jest zwykle zarezerwowana, aby w szczególności dotyczyć tego, czy użytkownicy z wadami wzroku mogą dobrze obsługiwać aplikację.
Chris Marisic,

17

Postępując zgodnie z tym, co dodało kilku innych, możesz szaleć za pomocą prostej klasy CSS bez PHP, bez kodu jQuery , po prostu zwykłego HTML i CSS.

Utwórz klasę CSS i dodaj ją do swojej kotwicy. Kod znajduje się poniżej.

.button-link {
    height:60px;
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(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);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}

<HTML>
    <a class="button-link" href="http://www.go-some-where.com"
       target="_blank">Press Here to Go</a>

To jest to. Jest to bardzo łatwe i pozwala być tak kreatywnym, jak chcesz. Kontrolujesz kolory, rozmiar, kształty (promień) itp. Aby uzyskać więcej informacji, zobacz witrynę, w której to znalazłem .


17

Jeśli chcesz uniknąć korzystania z formularza lub danych wejściowych i szukasz linku przypominającego przycisk, możesz utworzyć ładnie wyglądający link z opcją div, kotwicą i h1tagiem. Potencjalnie chciałbyś tego, abyś mógł swobodnie umieścić przycisk linku wokół swojej strony. Jest to szczególnie przydatne w przypadku przycisków centrujących poziomo i zawierających w nich tekst wyśrodkowany pionowo. Oto jak:

Twój przycisk będzie się składał z trzech zagnieżdżonych elementów: otoki div, kotwicy i h1, podobnie jak:

.link-button-wrapper {
    width: 200px;
    height: 40px;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    border-radius: 4px;
    background-color: #097BC0;
    box-shadow: 0px 2px 4px gray;
    display: block;
    border:1px solid #094BC0;
}
.link-button-wrapper > a {
    display: inline-table;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    width:100%;
}
.link-button-wrapper > a > h1 {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #f7f8f8;
    font-size: 18px;
    font-family: cabinregular;
    text-align: center;
}
<div class="link-button-wrapper">
    <a href="your/link/here">
        <h1>Button!</h1>
    </a>
</div>

Oto jak jsFiddle to sprawdzić i bawić się z nim.

Korzyści z tej konfiguracji: 1. Tworzenie wyświetlacza otoki div: blok ułatwia centrowanie (przy użyciu marginesu: 0 auto) i pozycjonowanie (podczas gdy <a> jest wbudowany i trudniejszy do pozycjonowania i niemożliwy do centrowania).

  1. Możesz po prostu wyświetlić <a>: blokować, przesuwać go i stylizować jako przycisk, ale wtedy wyrównanie tekstu w środku staje się trudne.

  2. Umożliwia to ustawienie <a> display: inline-table i <h1> display: table-cell, co pozwala na użycie vertical-align: middle na <h1> i wyśrodkowanie go w pionie (co zawsze jest miłe dla przycisk). Tak, możesz użyć paddingu, ale jeśli chcesz, aby przycisk zmieniał się dynamicznie, nie będzie tak czysty.

  3. Czasami, gdy osadzasz <a> w div, tylko tekst jest klikalny, ta konfiguracja sprawia, że ​​klikalny jest cały przycisk.

  4. Nie musisz zajmować się formularzami, jeśli tylko próbujesz przejść na inną stronę. Formularze służą do wprowadzania informacji i powinny być na to zarezerwowane.

  5. Umożliwia czyste oddzielenie stylizacji przycisków i stylów tekstu (przewaga rozciągania? Jasne, ale CSS może wyglądać nieprzyjemnie, więc dobrze jest go rozłożyć).

Zdecydowanie ułatwiło mi to zaprojektowanie mobilnej strony internetowej na ekrany o różnych rozmiarach.


Dostajesz rozsądny przycisk bez żadnego CSS
Soren

15

@ Nicolas, type="button"obserwowanie mnie zadziałało, ponieważ twój nie miał, dzięki czemu zaczął zachowywać się jak typ przesyłania. Ponieważ mam już jeden typ przesyłania. Nie działało dla mnie .... a teraz możesz albo dodać klasę do przycisku lub, <a>aby uzyskać wymagany układ:

<a href="http://www.google.com/">
    <button type="button">Click here</button>
</a>

12

Inną opcją jest utworzenie linku w przycisku:

<button type="button"><a href="yourlink.com">Link link</a></button>

Następnie użyj CSS, aby nadać styl linkowi i przyciskowi, tak aby link zajmował całą przestrzeń w przycisku (aby użytkownik nie pomylił kliknięcia):

button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}

Stworzyłem tutaj demo .


6
Pamiętaj, że specyfikacja mówi, że to nie jest poprawne, ponieważ przyciski nie powinny zawierać żadnych interaktywnych potomków. w3.org/TR/2011/WD-html5-20110525/the-button-element.html
lukeocom

1
Oboje macie rację. VS2015 oznacza to ostrzeżeniem: „Elementu a” nie można zagnieździć wewnątrz przycisku „elementu” ”, ale działa on z: IE11, Edge, Chrome, Firefox, Safari i przynajmniej niektórymi (być może wszystkimi) przeglądarkami mobilnymi. Więc nie używaj tej techniki, ale jeśli zrobiłeś to w przeszłości, na razie działa;)
Zeek2

8

Jeśli chcesz utworzyć przycisk, który będzie używany dla adresu URL w dowolnym miejscu, utwórz klasę przycisku dla kotwicy.

a.button {
    background-color: #999999;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 8px;
    text-align: center;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.button:hover {
    text-decoration: none;
}

7

Wiem, że przesłano wiele odpowiedzi, ale żadna z nich nie wydawała się naprawdę rozwiązać problemu. Oto moje zdanie na temat rozwiązania:

  1. Użyj <form method="get">metody, od której zaczyna się PO. Działa to naprawdę dobrze, ale czasami dołącza a ?do adresu URL. To ?jest główny problem.
  2. Użyj jQuery / JavaScript, aby wykonać następujący link, gdy JavaScript jest włączony, aby ?nie był dołączany do adresu URL. Bezproblemowo wróci do <form>metody dla bardzo niewielkiej części użytkowników, którzy nie mają włączonej obsługi JavaScript.
  3. Kod JavaScript korzysta z delegowania zdarzeń, dzięki czemu można dołączyć detektor zdarzeń przed <form>lub <button>nawet istnieć. W tym przykładzie używam jQuery, ponieważ jest szybki i łatwy, ale można to również zrobić w JavaScript.
  4. Kod JavaScript zapobiega domyślnej akcji, a następnie podąża za linkiem podanym w <form> actionatrybucie.

Przykład JSBin (fragment kodu nie może podążać za linkami)

// Listen for any clicks on an element in the document with the `link` class
$(document).on('click', '.link', function(e) {
    // Prevent the default action (e.g. submit the form)
    e.preventDefault();

    // Get the URL specified in the form
    var url = e.target.parentElement.action;
    window.location = url;
});
<!DOCTYPE html>
<html>

    <head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <meta charset="utf-8">
        <title>Form buttons as links</title>
    </head>

    <body>
        <!-- Set `action` to the URL you want the button to go to -->
        <form method="get" action="http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link">
            <!-- Add the class `link` to the button for the event listener -->
            <button type="submit" class="link">Link</button>
        </form>
    </body>

</html>


7

7 sposobów, aby to zrobić:

  1. Za pomocą window.location.href = 'URL'
  2. Za pomocą window.location.replace('URL')
  3. Za pomocą window.location = 'URL'
  4. Za pomocą window.open('URL')
  5. Za pomocą window.location.assign('URL')
  6. Korzystanie z formularza HTML
  7. Korzystanie z tagu kotwicy HTML

<!-- Using window.location.href = 'URL' -->
<button onclick='window.location.href = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.location.replace('URL') -->
<button onclick='window.location.replace("https://stackoverflow.com")'>
  Click Me
</button>

<!-- Using window.location = 'URL' -->
<button onclick='window.location = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.open('URL') -->
<button onclick='window.open("https://stackoverflow.com","_self","","")'>
  Click Me
</button>

<!-- Using window.location.assign('URL') -->
<button onclick='window.location.assign("http://www.stackoverflow.com")'>
  Click Me
</button>

<!-- Using HTML form -->
<form action='https://stackoverflow.com' method='get'>
  <input type='submit' value='Click Me'/>
</form>

<!-- Using HTML anchor tag -->
<a href='https://stackoverflow.com'>
  <button>Click Me</button>
</a>


4

Dla HTML 5 i stylizowany przycisk wraz z tłem obrazu

<a id="Navigate" href="http://www.google.com">
  <input 
    type="button"
    id="NavigateButton"
    style="
      background-image: url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);
      background-repeat: no-repeat;
      background-position: -272px -112px;
      cursor:pointer;
      height: 40px;
      width: 40px;
      border-radius: 26px;
      border-style: solid;
      border-color:#000;
      border-width: 3px;" title="Navigate"
    />
</a>


5
Nie sprawdza się. Wklejenie do validator.w3.org/nu/#textarea daje błąd: Dane wejściowe elementu nie mogą pojawiać się jako element potomny elementu.
Mark Amery

3

Możesz także użyć przycisku:

Na przykład w składni ASP.NET Core :

// Some other tags
 <form method="post">
      <input asp-for="YourModelPropertyOrYourMethodInputName"
      value="@TheValue" type="hidden" />
      <button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
      @(TextValue)
      </button>
  </form>
// Other tags...


<style>
       .link-button {
        background: none !important;
        border: none;
        padding: 0 !important;
        color: #20a8d8;
        cursor: pointer;
    }
</style>

3

jeśli używasz certyfikatu SSL

<a href="https://www.google.com" target="_blank"><button>Click me !</button></a>

2

Pomocne były osoby, które odpowiedziały przy użyciu <a></a>atrybutów na <button></button>.

ALE ostatnio napotkałem problem, kiedy użyłem linku wewnątrz <form></form>.

Przycisk jest teraz traktowany jak przycisk / jako przycisk przesyłania (HTML5). Próbowałem obejść tę metodę i znalazłem tę metodę.

Utwórz przycisk stylu CSS, taki jak poniżej:

.btn-style{
    border : solid 1px #0088cc;
    border-radius : 6px;
    moz-border-radius : 6px;
    -webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    -moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    font-size : 18px;
    color : #696869;
    padding : 1px 17px;
    background : #eeeeee;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(49%,#eeeeee), color-stop(72%,#cccccc), color-stop(100%,#eeeeee));
    background : -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );

}

Lub stwórz nowy tutaj: CSS Button Generator

A następnie utwórz link z tagiem klasy nazwanym na podstawie stylu CSS:

<a href='link.php' class='btn-style'>Link</a>

Oto skrzypce:

JS Fiddle


3
Ustaw typ przycisku = „przycisk”, który pozwoli ci kliknąć go bez przesyłania formularza.
Blake A. Nichols,

2

Użyłem tego na stronie, nad którą obecnie pracuję i działa świetnie! Jeśli chcesz też trochę fajnego stylu, umieszczę tutaj CSS.

input[type="submit"] {
  background-color: white;
  width: 200px;
  border: 3px solid #c9c9c9;
  font-size: 24pt;
  margin: 5px;
  color: #969696;
}

input[type="submit"]:hover {
  color: white;
  background-color: #969696;
  transition: color 0.2s 0.05s ease;
  transition: background-color 0.2s 0.05s ease;
  cursor: pointer;
}
<input type="submit" name="submit" onClick="window.location= 'http://example.com'">

JSFiddle robocza tutaj .


2

Możesz także ustawić przyciski type-propertyna „przycisk” (powoduje to, że nie przesyła formularza), a następnie zagnieździć je w łączu (powoduje przekierowanie użytkownika).

W ten sposób możesz mieć inny przycisk w tej samej formie, który przesyła formularz, w razie potrzeby. Myślę też, że w większości przypadków jest to lepsze niż ustawienie metody formularza i akcji jako linku (chyba że jest to formularz wyszukiwania, jak sądzę ...)

Przykład:

<form method="POST" action="/SomePath">
  <input type="text" name="somefield" />
  <a href="www.target.com"><button type="button">Go to Target!</button></a>
  <button type="submit">submit form</button>
</form>

W ten sposób pierwszy przycisk przekierowuje użytkownika, a drugi przesyła formularz.

Uważaj, aby przycisk nie wyzwalał żadnej akcji, ponieważ spowoduje to konflikt. Ponadto, jak zauważył Arius, powinieneś być świadomy, że z powyższego powodu nie jest to ściśle uważany za prawidłowy HTML, zgodnie ze standardem. Działa jednak zgodnie z oczekiwaniami w Firefox i Chrome, ale nie przetestowałem go jeszcze dla Internet Explorera.


2
Element „przycisk” nie może być zagnieżdżony w elemencie „a”.
Arius,

zgodnie ze standardem nie, ale z mojego doświadczenia wynika, że ​​to działa dobrze. Jeszcze nie przetestowałem tego w wielu przeglądarkach, ale przynajmniej FF i Chrome wydają się radzić sobie dobrze, z oczekiwanym zachowaniem.
Anders Martini,

Arius: Przeczytałem trochę, poeksperymentowałem jeszcze raz i odkryłem, że element przycisku może w rzeczywistości być zagnieżdżony w elemencie <a>, o ile element przycisku nie ma własnej akcji (ponieważ oczywiście spowodowałoby to konflikt - jaką akcję wykona przeglądarka? przyciski czy <a>?), ale dopóki upewnisz się, że sam element przycisku nie wyzwala żadnej akcji po kliknięciu, powinno to działać dobrze (prawdopodobnie nie powinno uważane za najlepszą praktykę)
Anders Martini,

4
Tu nie chodzi o możliwość. Jest to niezgodne ze specyfikacją HTML5 i to wszystko.
Arius

1

Możesz użyć javascript:

<html>
<button onclick='window.location = "http://www.google.com"'>
            Google
        </button>

</html>

Zamień na http://www.google.comswoją stronę internetową, pamiętaj o dołączeniu http://przed adresem URL.


1

W JavaScript

setLocation(base: string) {
  window.location.href = base;
}

W HTML

<button onclick="setLocation('/<whatever>')>GO</button>"

1

Wpisz window.locationi naciśnij enterw konsoli przeglądarki. Następnie możesz uzyskać jasny pomysł, co locationzawiera

   hash: ""
   host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "/programming/2906582/how-to-create-an-html-button- 
   that-acts-like-a-link"
   origin: "https://stackoverflow.com"
   pathname: "/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"
   port: ""
   protocol: "https:"

Tutaj możesz ustawić dowolną wartość.

Aby przekierować kolejną stronę, możesz ustawić hrefwartość za pomocą linku.

   window.location.href = your link

W Twoim przypadku-

   <button onclick="window.location.href='www.google.com'">Google</button>

0

Jeśli potrzebujesz, aby wyglądał jak przycisk, z naciskiem na obraz gradientowy , możesz to zrobić:

<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>

0

Jeśli chcesz przekierować na strony, które znajdują się w Twojej witrynie, oto moja metoda - dodałem atrybut href do przycisku i onclick przypisał this.getAttribute ('href') do document.location.href

** Nie zadziała, jeśli odwołujesz się do adresów URL poza domeną z powodu opcji „X-Frame-Options” na „sameorigin”.

Przykładowy kod:

<button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.