<a href=“”> bağlantısının düğme gibi görünmesi nasıl sağlanır?

Bu düğme resmine sahibim:

<a href="">some words</a>Bu bağlantının bu düğme olarak görünmesi için basit ve stil sahibi bir bağlantı yapmanın mümkün olup olmadığını merak ediyordum.

Mümkünse bunu nasıl yaparım?

CSS kullanarak:

.button {
    display: block;
    width: 115px;
    height: 25px;
    background: #4E9CAF;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    line-height: 25px;
}

<a class="button">Add Problem</a>

http://jsfiddle.net/GCwQu/

Kontrol Bootstrap adlı dokümanlar . Bir sınıf .btnvardır ve aetiketle çalışır , ancak .btn-*sınıfla birlikte belirli bir sınıf eklemeniz gerekir .btn.

Örneğin: <a class="btn btn-info"></a>

böyle bir bağlantıya sahip bir düğmeyi kolayca kaydırabilirsiniz <a href="#"> <button>my button </button> </a>

Bunun gibi bir şey bir düğmeye benzer:

a.LinkButton {
  border-style: solid;
  border-width : 1px 1px 1px 1px;
  text-decoration : none;
  padding : 4px;
  border-color : #000000
}

Örnek için http://jsfiddle.net/r7v5c/1/ adresine bakın .

1. Bunu dene:

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
   <div class="container">
     <h2>Button Tags</h2>
     <a href="#" class="btn btn-info" role="button">Link Button</a>
     <button type="button" class="btn btn-info">Button</button>
     <input type="button" class="btn btn-info" value="Input Button">
     <input type="submit" class="btn btn-info" value="Submit Button">
   </div>

   Kod parçacığını çalıştırınSonuçları gizle

   Snippet'i genişlet

2. hrefOradan bir etiket satırı kullanabilirsiniz .

   <a href="URL" class="btn btn-info" role="button">Button Text</a>

Belirli bir tasarımı css ile sabit kodlamaktan kaçınmak, bunun yerine tarayıcının varsayılan düğmesine güvenmek istiyorsanız, aşağıdaki css'i kullanabilirsiniz.

a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

Muhtemelen IE'de çalışmayacağına dikkat edin.

Diğer yanıtların hiçbiri, bağlantı düğmesinin fareyle üzerine gelindiğinde görünümünü değiştirdiği kodu göstermez.

Bunu düzeltmek için yaptığım şey bu:

HTML:

<a href="http://www.google.com" class="link_button2">My button</a>

CSS:

.link_button2 {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: solid 1px #1A4575;
  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);
  background: #3A68A1;
  color: #fee1cc;
  text-decoration: none;
  padding: 8px 12px;
  text-decoration: none;
  font-size: larger;
}

a.link_button2:hover {
  text-decoration: underline;
  background: #4479BA;
  border: solid 1px #20538D;

  /* optional different shadow on hover
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  */

}

JSFiddle: https://jsfiddle.net/adamovic/ovu3k0cj/

• Etikette background-imageCSS özelliğini kullanın<a>
• Set display:blockve ayarlamak widthve heightCSS

Bu hile yapmalı.

Evet bunu yapabilirsiniz.

İşte bir örnek:

a{
    background:IMAGE-URL;
    display:block;
    height:IMAGE-HEIGHT;
    width:IMAGE-WIDTH;
}

Elbette yukarıdaki örneği ihtiyacınıza göre değiştirebilirsiniz. Önemli olan, bir blok ( display:block) veya bir satır içi blok ( display:inline-block) olarak görünmesini sağlamaktır .

Temel HTML için, HREF (A) içindeki resim URL'nize src ayarlı bir img etiketi ekleyebilirsiniz.

<a href="http://www.google.com"><img src="http://problemio.com/img/ui/add_problem.png" /></a>

Düğme olarak görüntülemek istediğiniz bağlantı öğeleri için bir sınıf oluşturabilirsiniz.

Örneğin:

Bir görselin kullanılması:

.button {
   display:block;
   background: url('image');
   width: same as image
   height: same as image
}

veya saf bir CSS yaklaşımı kullanarak:

.button {
    background:#E3E3E3;
    border: 1px solid #BBBBBB;
    border-radius: 3px 3px 3px 3px;
}

Metni aşağıdaki gibi bir şeyle saklamayı daima unutmayın:

text-indent: -9999em;

Saf CSS düğmelerinden oluşan mükemmel bir galeri burada ve css3 düğme oluşturucusunu bile kullanabilirsiniz.

Burada birçok stil ve seçenek var

iyi şanslar

Tutarlılık için iki seçeneğiniz var.

1. Çerçeveye özgü etiketleri kullanın ve bunları web sitesinde kullanın.
2. Bir düğme öğesindeki bir bağlantıyı taklit etmek için JavaScript kullanın ve ardından düğmenin tarayıcının düğmeleriyle tutarlı görünmesini sağlayın. Bu css düğmesi görünümlü hackler asla doğru olmayacak.

.

<button onclick="location.href = 'Homepage.html'; return false;">My Button</button>

return false; tıklanan düğmenin varsayılan davranışını önlemektir.

Sadece normal css düğme tasarımlarını alın ve bu CSS'yi bir bağlantıya uygulayın (tıpkı bir düğmeye yaptığınız gibi).

Misal:

<a href="#" class="stylish-button">Some words</a>

<style type="text/css">
.stylish-button {
    -webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    -moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    color:#333;
    background-color:#FA2;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:none;
    font-size:16px;
    font-weight:700;
    padding:4px 16px;
    text-shadow:#FE6 0 1px 0
}
</style>

aktif ve odak ekledikten sonra sorun yaşayanlar için düğmenize bir sınıf veya kimlik adı verin ve bunu css'e ekleyin

Örneğin

//HTML Kodu

<button id="aboutus">ABOUT US</button>

// css kodu

#aboutus{background-color: white;border:none;outline-style: none;}

Chromium 40 ve Firefox 36 ile test edildi

<a href="url" style="text-decoration:none">
   <input type="button" value="click me!"/>
</a>

Bu kodu deneyin:

<code>

    <a href="#" class="button" > HOME </a>

    <style type="text/css">

        .button { background-color: #00CCFF; padding: 8px 16px; display: inline-block; text-decoration: none; color: #FFFFFF border-radius: 3px;}

        .button:hover { background-color: #0066FF; }

    </style>

</code>

Bunu izleyin (Nasıl yapılacağını açıklayacaktır) - https://youtu.be/euti4HAJJfk

Bu kadar basit:

<a href="#" class="btn btn-success" role="button">link</a>

"Class =" btn btn-success "& role = button eklemeniz yeterli