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

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>

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.

<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 .

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ładowy wygląd Bootstrap (v3) :

Przykładowy wygląd Bootstrap (v2) :

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.

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ą

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.

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>

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

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ść.

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.

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/

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.

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 .

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).

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

3. 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.

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

5. 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.

6. 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.

@ 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>

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 .

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;
}

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 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>

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>

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>

jeśli używasz certyfikatu SSL

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

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

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 .

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.

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.

W JavaScript

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

W HTML

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

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>

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>

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>