Bağlantı görevi gören bir HTML düğmesi nasıl oluşturulur?

Bağlantı görevi gören bir HTML düğmesi oluşturmak istiyorum. Bu nedenle, düğmeyi tıkladığınızda bir sayfaya yönlendirir. Mümkün olduğunca erişilebilir olmasını istiyorum.

URL'de fazladan karakter veya parametre olmaması için de bunu istiyorum.

Bunu nasıl başarabilirim?

Şimdiye kadar gönderilen cevaplara dayanarak, şu anda bunu yapıyorum:

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

ancak bununla ilgili sorun Safari ve Internet Explorer'da URL'nin sonuna bir soru işareti karakteri eklemesidir. URL'nin sonuna herhangi bir karakter eklemeyen bir çözüm bulmam gerekiyor.

Bunu yapmak için başka iki çözüm daha vardır: JavaScript kullanmak veya düğme gibi görünecek bir bağlantı oluşturmak.

JavaScript kullanma:

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

Ancak bu açıkça JavaScript gerektirir ve bu nedenle ekran okuyucuları için daha az erişilebilirdir. Bağlantının amacı başka bir sayfaya gitmektir. Bu yüzden bir düğmeyi bağlantı gibi davranmaya çalışmak yanlış çözümdür. Benim önerim, bir bağlantı kullanmanız ve bir düğme gibi görünmesi için stil vermenizdir .

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

HTML

Düz HTML yolu, onu <form>, actionözellikte istenen hedef URL'yi belirttiğiniz bir yere koymaktır .

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

Gerekirse, display: inline;onu çevreleyen metinle akışta tutmak için CSS'yi forma yerleştirin. <input type="submit">Yukarıdaki örnek yerine, kullanabilirsiniz <button type="submit">. Tek fark, <button>elementin çocuklara izin vermesidir.

Öğe <button href="https://google.com">ile sezgisel olarak kullanabilmeyi beklersiniz <a>, ancak maalesef hayır, bu özellik HTML spesifikasyonuna göre mevcut değildir .

CSS

CSS'ye izin veriliyorsa, <a>diğerlerinin yanı sıra appearanceözelliği kullanan bir düğme gibi görünmesi için stilini kullanın ( yalnızca Internet Explorer'da desteklenmez ).

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

Veya Bootstrap gibi birçok CSS kütüphanesinden birini seçin .

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

JavaScript

JavaScript'e izin veriliyorsa window.location.href,.

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

<input type="button">Yukarıdaki örnek yerine, kullanabilirsiniz <button>. Tek fark, <button>elementin çocuklara izin vermesidir.

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

type="button"Özniteliğin, eksik değer varsayılanı Gönder Düğmesi durumu olduğundan önemli olduğunu unutmayın .

Temel bir HTML bağlantı etiketinde aradığınız bir düğmenin görsel görünümü ise , aşağıdaki ortak HTML türü bağlantılarından / düğmelerinden herhangi birini düğme olarak görünecek şekilde biçimlendirmek için Twitter Bootstrap çerçevesini kullanabilirsiniz. Lütfen çerçevenin 2, 3 veya 4 sürümü arasındaki görsel farklılıklara dikkat edin:

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

Bootstrap (v4) örnek görünümü:

Bootstrap (v3) örnek görünümü:

Bootstrap (v2) örnek görünümü:

kullanın:

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

Ne yazık ki, bu işaretleme artık HTML5'te geçerli değildir ve potansiyel olarak beklendiği gibi geçerli olmayacak veya her zaman çalışmayacaktır. Başka bir yaklaşım kullanın.

HTML5'ten itibaren düğmeler formactionözelliği destekler . En iyisi, herhangi bir Javascript ya da hile gerekmez.

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

Uyarılar

• <form>Etiketlerle çevrelenmelidir .
• <button>tür "gönder" (veya belirtilmemiş) olmalıdır, "düğme" türüyle çalıştıramadım. Hangi aşağı noktayı getiriyor.
• Formdaki varsayılan eylemi geçersiz kılar. Başka bir deyişle, bunu başka bir formun içinde yaparsanız, bu bir çatışmaya neden olur.

Referans: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Tarayıcı Desteği: https://developer.mozilla.org/en-US/docs/Web/ HTML / Eleman / düğmesi # Browser_compatibility

Aslında çok basit ve herhangi bir form öğesi kullanmadan. <a> etiketini içinde bir düğmeyle kullanabilirsiniz :).

Bunun gibi:

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

Ve href'i aynı sayfaya yükleyecektir. Yeni bir sayfa mı istiyorsunuz? Sadece kullan target="_blank".

DÜZENLE

Birkaç yıl sonra, çözümüm hala çalışırken, istediğiniz her şeye bakmak için çok fazla CSS kullanabileceğinizi unutmayın. Bu sadece hızlı bir yoldu.

Bir iç form kullanıyorsanız , düğme öğesi ile birlikte = "reset" özniteliğini ekleyin . Form eylemini önleyecektir.

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

Bu soruna üç çözüm var gibi görünüyor (hepsi artıları ve eksileri ile).

Çözüm 1: Formdaki düğme.

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

Ancak bununla ilgili sorun, Chrome, Safari ve Internet Explorer gibi popüler tarayıcıların bazı sürümlerinde, URL'nin sonuna bir soru işareti karakteri eklemesidir. Başka bir deyişle, yukarıdaki kod için URL'niz şöyle görünecektir:

http://someserver/pages2?

Bunu düzeltmenin bir yolu vardır, ancak sunucu tarafı yapılandırması gerektirir. Apache Mod_rewrite kullanan bir örnek , izleyen tüm istekleri, ?olmadan URL'lerine yönlendirmek olacaktır ?. İşte .htaccess kullanan bir örnek, ancak burada tam bir iş parçacığı var :

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

Benzer konfigürasyonlar kullanılan web sunucusuna ve yığına bağlı olarak değişebilir. Bu yaklaşımın bir özeti:

Artıları:

1. Bu gerçek bir düğme ve anlamsal olarak mantıklı.
2. Gerçek bir düğme olduğundan, gerçek bir düğme gibi davranacaktır (örneğin, etkin olduğunda boşluk çubuğuna basıldığında sürüklenebilir davranış ve / veya tıklamayı taklit eder).
3. JavaScript yok, karmaşık bir stil gerekli değil.

Eksileri:

1. Firar ?, bazı tarayıcılarda çirkin görünüyor. Bu, GET yerine POST kullanılarak bir saldırı (bazı durumlarda) ile düzeltilebilir, ancak temiz yol, sunucu tarafı yeniden yönlendirmeye sahip olmaktır. Sunucu tarafı yönlendirmesinin olumsuz tarafı, 304 yönlendirmesi nedeniyle bu bağlantılar için fazladan bir HTTP çağrısına neden olmasıdır.
2. Ek <form>öğe ekler
3. Birden çok form kullanılırken eleman konumlandırma zor olabilir ve duyarlı tasarımlarla uğraşırken daha da kötüleşir. Öğelerin sırasına bağlı olarak bu çözümle bazı düzenlerin elde edilmesi imkansız hale gelebilir. Bu, tasarım bu zorluktan etkilenirse kullanılabilirliği etkileyebilir.

2. Çözüm: JavaScript kullanma.

Bir düğmeyi kullanarak bir bağlantının davranışını taklit etmek için onclick ve diğer olayları tetiklemek için JavaScript kullanabilirsiniz. Aşağıdaki örnek HTML'yi geliştirmek ve kaldırmak olabilir, ancak sadece fikri göstermek için var:

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

Artıları:

1. Basit (temel gereksinimler için) ve ekstra bir form gerektirmeden semantik tutun.
2. Gerçek bir düğme olduğundan, gerçek bir düğme gibi davranacaktır (örneğin, etkin olduğunda boşluk çubuğuna basıldığında sürüklenebilir davranış ve / veya tıklamayı taklit eder).

Eksileri:

1. Daha az erişilebilir anlamına gelen JavaScript gerektirir. Bu, bağlantı gibi bir temel (çekirdek) eleman için ideal değildir.

Çözüm 3: Düğme gibi biçimlendirilmiş çapa (bağlantı).

Bir düğmeyi düğme gibi biçimlendirmek nispeten kolaydır ve farklı tarayıcılarda benzer deneyim sağlayabilir. Bootstrap bunu yapar, ancak basit stilleri kullanarak kendi başınıza elde etmek de kolaydır.

Artıları:

1. Basit (temel gereksinimler için) ve iyi çapraz tarayıcı desteği.
2. <form>Çalışmak için bir gerekmez .
3. Çalışması için JavaScript gerekmez.

Eksileri:

1. Semantik bir tür kırıktır, çünkü bir düğme gibi davranan bir bağlantı değil, bir bağlantı gibi davranan bir düğme istiyorsunuz.
2. Çözüm # 1'in tüm davranışlarını yeniden oluşturmayacaktır. Düğme ile aynı davranışı desteklemez. Örneğin, bağlantılar sürüklendiğinde farklı tepki verir. Ayrıca "boşluk çubuğu" bağlantı tetikleyicisi fazladan JavaScript kodu olmadan çalışmaz. Tarayıcılar keypressdüğmelerdeki olayları nasıl destekledikleri konusunda tutarlı olmadıklarından çok karmaşıklık katacaktır .

Sonuç

Çözüm # 1 ( Formdaki düğme ), minimum çalışma gerektiren kullanıcılar için en şeffaf gibi görünüyor. Yerleşiminiz bu seçimden etkilenmezse ve sunucu tarafı ayarlaması yapılabilirse, erişilebilirliğin en öncelikli olduğu durumlar için iyi bir seçenektir (örneğin bir hata sayfasındaki bağlantılar veya hata mesajları).

JavaScript erişilebilirlik gereksinimleriniz için bir engel değilse, # 1 ve # 3 yerine # 2 ( JavaScript ) çözümü tercih edilir.

Herhangi bir nedenle erişilebilirlik hayati önem taşıyorsa (JavaScript bir seçenek değildir), ancak tasarımınızın ve / veya sunucu yapılandırmanızın # 1 seçeneğini, ardından çözüm # 3'ü ( Düğme gibi biçimlendirilmiş çapa ) kullanmanızı engellediği bir durumdasınız. bu sorunu en az kullanılabilirlik etkisi ile çözmek için iyi bir alternatiftir.

Düğmenizi neden yalnızca referans etiketinin içine yerleştirmiyoruz?

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

Bu benim için mükemmel çalışıyor gibi görünüyor ve bağlantıya herhangi bir% 20 etiket eklemez, sadece nasıl istediğinizi. Göstermek için google'a bir bağlantı kullandım.

Elbette bunu bir form etiketine sarabilirsiniz, ancak gerekli değildir.

Başka bir yerel dosyayı bağlarken dosyayı aynı klasöre koyun ve dosya adını referans olarak ekleyin. Veya, aynı klasörde değilse dosyanın konumunu belirtin.

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

Bu, URL'nin sonuna da herhangi bir karakter eklemez, ancak dosyanın adıyla bitmeden önce URL olarak files proje yoluna sahiptir. Örneğin

Eğer proje yapım ...

.. bir klasörü belirtir - bir dosyayı dörde belirtir | üst klasördeki bir alt dizini veya dosyayı belirtme

..public
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html

Main.html'yi açarsam URL olurdu,

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

Ancak, ikincil.html olarak değiştirmek için main.html içindeki düğmeyi tıkladığımda, URL,

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

URL'nin sonuna özel karakter eklenmedi. Umarım bu yardımcı olur. Bu arada - (% 20, bir URL'deki kodlanmış ve yerine yerleştirilmiş bir alanı belirtir.)

Not: localhost: 0000 belli ki 0000 olmayacak, orada kendi port numaranız olacak.

Ayrıca, main.html URL'sinin sonunda? _İjt = xxxxxxxxxxxxxx, x kendi bağlantınız tarafından belirlenir, bu yüzden açıkçası benimki olmayacaktır.

Bazı temel noktaları söylüyorum gibi görünebilir ama sadece olabildiğince iyi açıklamak istiyorum. Okuduğunuz için teşekkürler ve umarım bu en azından birine yardım eder. Mutlu programlama.

Öğenin etrafına bir etiket koyabilirsiniz:

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

https://jsfiddle.net/hj6gob8b/

Bunu yapmanın tek yolu (BalusC'in ustaca form fikri hariç!) onclickDüğmeye erişilebilirlik için iyi olmayan bir JavaScript etkinliği eklemektir .

Düğme gibi normal bir bağlantı oluşturmayı düşündünüz mü? İşletim sistemine özgü düğmeleri bu şekilde elde edemezsiniz, ancak yine de IMO'nun en iyi yolu.

Birkaç kişinin eklediği şeyle birlikte, sadece PHP veya jQuery olmadan basit bir CSS sınıfı kullanarak çıldırmış olabilirsiniz kodu, sadece basit HTML ve CSS .

Bir CSS sınıfı oluşturun ve bunu çapanıza ekleyin. Kod aşağıda.

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

İşte bu. Yapması çok kolaydır ve istediğiniz kadar yaratıcı olmanızı sağlar. Renkleri, boyutu, şekilleri (yarıçap) vb. Kontrol edersiniz. Daha fazla ayrıntı için bunu bulduğum siteye bakın .

Bir form veya giriş kullanmak zorunda kalmaktan kaçınmak istiyorsanız ve düğme görünümlü bir bağlantı arıyorsanız, bir div sarmalayıcı, bir çapa ve bir bağlantı ile iyi görünümlü düğme bağlantıları oluşturabilirsiniz. h1 etiketle . Bağlantı düğmesini sayfanızın etrafına serbestçe yerleştirebilmeniz için bunu potansiyel olarak istersiniz. Bu, özellikle düğmeleri yatay olarak ortalamak ve içinde dikey olarak ortalanmış metin kullanmak için kullanışlıdır. Bunu nasıl yapacağınız aşağıda açıklanmıştır:

Düğmeniz üç iç içe parçadan oluşacaktır: bir div sarmalayıcısı, bir çapa ve bir h1, şöyle:

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

İşte kontrol etmek ve onunla oynamak için bir jsFiddle .

Bu kurulumun avantajları: 1. Div sargısı ekranının yapılması: blok, ortalamayı (kenar boşluğu: 0 otomatik kullanarak) ve konumu (<a> satır içi ve konumlandırması daha zor ve ortalaması mümkün değilken) kolaylaştırır.

2. <a> display: block, etrafında hareket ettirebilir ve bir düğme olarak biçimlendirebilirsiniz, ancak içindeki metni dikey olarak hizalamak zorlaşır.

3. Bu, <a> display: inline-table ve <h1> display: table-cell 'i yapmanızı sağlar; bu, <h1> üzerinde dikey hizalama: orta kullanmanıza ve dikey olarak ortalamanıza (her zaman iyi düğme). Evet, dolgu kullanabilirsiniz, ancak düğmenizin dinamik olarak yeniden boyutlandırılmasını istiyorsanız, bu kadar temiz olmayacaktır.

4. Bazen <a> bir div içine gömüldüğünüzde, sadece metin tıklanabilir, bu kurulum tüm düğmeyi tıklanabilir hale getirir.

5. Sadece başka bir sayfaya geçmeye çalışıyorsanız formlarla uğraşmanız gerekmez. Formlar bilgi girmek içindir ve bunlar için ayrılmalıdır.

6. Düğme stilini ve metin stilini birbirinden temiz bir şekilde ayırmanıza izin verir (esneme avantajı? Elbette, ancak CSS kötü görünebilir, bu yüzden ayrıştırmak güzeldir).

Değişken boyutlu ekranlar için mobil bir web sitesi oluşturmak hayatımı kesinlikle kolaylaştırdı.

@ Nicolas, seninki type="button"gönderme türü olarak davranmaya başladığı için aşağıdaki gibi benim için çalıştı ... zaten bir gönderme türü var. Çünkü benim için çalışmadı .... ve şimdi ya sınıf ekleyebilirsiniz düğmesine veya <a>gerekli düzeni elde etmek için:

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

Başka bir seçenek, düğmede bir bağlantı oluşturmaktır:

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

Ardından, bağlantı ve düğmeyi biçimlendirmek için CSS'yi kullanın, böylece bağlantı düğmedeki tüm alanı kaplar (böylece kullanıcı tarafından kaçırılmaması gerekir):

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

Burada bir demo oluşturdum .

Herhangi bir yerde bir URL için kullanılan bir düğme oluşturmak istiyorsanız, bir bağlantı için bir düğme sınıfı oluşturun.

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

Gönderilen birçok yanıt olduğunu biliyorum, ama hiçbiri sorunu gerçekten çivilememiş gibi görünüyordu. İşte benim çözümüm:

1. <form method="get">OP'nin başladığı yöntemi kullanın . Bu gerçekten iyi çalışıyor, ancak bazen ?URL'ye a ekler . ?Ana sorundur.
2. JavaScript etkinleştirildiğinde aşağıdaki bağlantıyı yapmak için jQuery / JavaScript kullanın, böylece ?URL'ye eklenmez. <form>JavaScript'i etkin olmayan kullanıcıların çok küçük bir kısmı için yönteme sorunsuz bir şekilde geri dönecektir .
3. Önce bir olay dinleyicisi ekleyebilirsiniz böylece JavaScript kodu olay heyeti kullanan <form>veya <button>hatta mevcut. Bu örnekte jQuery kullanıyorum, çünkü hızlı ve kolaydır, ancak 'vanilya' JavaScript'te de yapılabilir.
4. JavaScript kodu, varsayılan eylemin gerçekleşmesini önler ve ardından <form> actionöznitelikte verilen bağlantıyı izler .

JSBin Örneği (kod snippet'i bağlantıları takip edemez)

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

Bunu yapmanın 7 yolu:

1. kullanma window.location.href = 'URL'
2. kullanma window.location.replace('URL')
3. kullanma window.location = 'URL'
4. kullanma window.open('URL')
5. kullanma window.location.assign('URL')
6. HTML formunu kullanma
7. HTML bağlantı etiketini kullanma

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

HTML 5 ve tarz düğmesi için görüntü arka planı

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

Ayrıca bir düğme kullanabilirsiniz:

Örneğin, ASP.NET Core sözdiziminde :

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

SSL Sertifikası kullanıyorsanız

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

<a></a>Üzerindeki özellikleri kullanarak yanıtlayan kişiler <button></button>yardımcı oldu.

AMA son zamanlarda, içinde bir bağlantı kullandığımda bir sorunla karşılaştı <form></form>.

Düğme artık bir gönderme düğmesi (HTML5) olarak / olarak kabul edilmektedir. Bir şekilde çalışmayı denedim ve bu yöntemi buldum.

Aşağıdakine benzer bir CSS stili düğmesi oluşturun:

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

}

Veya burada yeni bir tane oluşturun: CSS Button Generator

Ardından , yaptığınız CSS stilinin adını taşıyan bir sınıf etiketi ile bağlantınızı oluşturun :

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

İşte bir keman:

JS Fiddle

Ben şu anda üzerinde çalıştığım bir web sitesi için kullandım ve harika çalışıyor !. Biraz havalı bir stil istiyorsanız, CSS'yi buraya koyacağım.

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 burada çalışıyor .

Düğmeleri type-property"düğme" olarak ayarlayabilir (formu göndermemesini sağlar) ve ardından bir bağlantının içine yerleştirebilir (kullanıcıyı yeniden yönlendirmesini sağlar).

Bu şekilde, aynı formda, gerektiğinde formu gönderen başka bir düğmeniz olabilir. Ben de bu çoğu durumda form yöntemi ve eylem bir bağlantı olarak ayarlanması tercih edilebilir (sanırım bir arama formu olmadığı sürece ...)

Misal:

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

Bu şekilde ilk düğme kullanıcıyı yeniden yönlendirirken, ikinci düğme formu gönderir.

Düğmenin herhangi bir işlemi tetiklemediğinden emin olun, bu bir çakışma ile sonuçlanır. Ayrıca Arius'un belirttiği gibi, yukarıdaki nedenden dolayı, standarda göre bunun kesinlikle geçerli HTML olarak kabul edilmediğinin farkında olmalısınız. Ancak Firefox ve Chrome'da beklendiği gibi çalışıyor, ancak henüz Internet Explorer için test etmedim.

Javascript kullanabilirsiniz:

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

</html>

http://www.google.comWeb sitenizle değiştirin http://, URL'den önce eklediğinizden emin olun .

JavaScript'te

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

HTML'de

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

Tip window.locationve basın entertarayıcı konsolda. Sonra ne locationiçerdiği hakkında net bir fikir edinebilirsiniz.

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

Buradan herhangi bir değer ayarlayabilirsiniz.

Yani başka bir sayfayı yeniden yönlendirmek hrefiçin bağlantınızla değer ayarlayabilirsiniz .

   window.location.href = your link

Senin durumunda-

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

İhtiyacınız olan şey , degrade görüntüsüne vurgu yaparak bir düğme gibi görünecekse , bunu yapabilirsiniz:

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

Web sitenizde bulunan sayfalar için yönlendirmek istiyorsanız, işte benim yöntemim - düğmeye href niteliğini ekledim ve onclick bunu atadı. GetAttribute ('href') document.location.href'ye

** 'X Çerçevesi Seçenekleri' nedeniyle 'sameorigin' nedeniyle alan adınızın dışındaki URL'lere başvurursanız çalışmaz.

Basit kod:

<button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>