Bagaimana cara membuat tombol terlihat seperti tautan?


287

Saya perlu membuat tombol seperti tautan menggunakan CSS. Perubahan telah dilakukan tetapi ketika saya mengkliknya, itu menunjukkan seolah-olah itu ditekan seperti pada tombol. Adakah yang tahu cara menghapusnya, sehingga tombol itu berfungsi sebagai tautan bahkan ketika diklik?


4
onclick peristiwa pada tautan sesederhana pada tombol
knittl

2
@knittl, @cletus Sebenarnya, tautan dan tombol memiliki arti yang sangat berbeda dalam HTML. Anda harus membaca whatwg.org/specs/web-apps/current-work/multipage/… . Mungkin bukan ide yang bagus untuk membuat tombol gaya agar terlihat seperti tautan, tetapi itu tergantung pada desain UI, sementara menggunakan tautan justru bertentangan dengan spesifikasi HTML.
Anton Strogonoff

5
Ada beberapa alasan mengapa penataan tombol seperti tautan mungkin diperlukan. (1) tombol memiliki type = "submit" (2) tombol memiliki style yang bagus yaitu gambar latar belakang dengan panjang variabel
TJ.

95
Mungkin juga semantik benar untuk sesuatu menjadi tombol, bahkan jika Anda ingin itu terlihat seperti tautan. Sebagai contoh, bayangkan sepasang tautan "Bentangkan Semua | Tutup Semua" yang mengubah sesuatu pada halaman. Mengklik ini menyebabkan suatu tindakan, tetapi tidak membawa pengguna ke mana pun - semantiknya adalah tombol. Namun desainer mungkin memiliki tautan khusus untuk alasan penampilan. Jadi ini sebenarnya pertanyaan yang sangat bagus.
shacker

17
Saya menggunakan tombol alih-alih tautan karena memicu metode JS dengan tautan, saya terpaksa menautkannya untuk #kemudian digunakan event.preventDefault(). Itu jahat, seperti menghubungkan ke javascript:void(0);.
Archonic

Jawaban:


351

button {
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;
}
<button> your button that looks like a link</button>


24
Variasi saya yang sangat sedikit pada biola - memindahkan dekorasi teks: aturan garis bawah untuk bertindak pada tombol: hover. lihat di biola bercabang dua saya .
odedbd

10
Jika Anda tidak ingin semua tombol ditata sebagai tautan, beri ruang lingkup gaya dengan sesuatu seperti button.link {...styles...}itu <button class="link">Your button</button>. Ini juga menghindari penggunaan !importantyang selalu merupakan ide bagus.
Archonic

3
Ingatlah untuk menjaga outline. Beberapa browser menambahkannya tombol. Anda dapat mengatur outline-color: transparent.
SiliconMind

4
Tolong jangan hapus outline karena itu akan membuat tombol Anda tidak dapat diakses: outlinenone.com
Dominik

4
Alih-alih border-bottomdigunakan text-decoration:underline.
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

86

Kode jawaban yang diterima berfungsi untuk sebagian besar kasus, tetapi untuk mendapatkan tombol yang benar-benar berperilaku seperti tautan, Anda memerlukan sedikit kode lagi. Sangat sulit untuk mendapatkan penataan tombol yang terfokus tepat di Firefox (Mozilla).

CSS berikut memastikan bahwa jangkar dan tombol memiliki properti CSS yang sama dan berperilaku sama pada semua browser umum:

button {
  align-items: normal;
  background-color: rgba(0,0,0,0);
  border-color: rgb(0, 0, 238);
  border-style: none;
  box-sizing: content-box;
  color: rgb(0, 0, 238); 
  cursor: pointer;
  display: inline;
  font: inherit;
  height: auto;
  padding: 0;
  perspective-origin: 0 0;
  text-align: start;
  text-decoration: underline;
  transform-origin: 0 0;
  width: auto;
  -moz-appearance: none;
  -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
  -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}

/* Mozilla uses a pseudo-element to show focus on buttons, */
/* but anchors are highlighted via the focus pseudo-class. */

@supports (-moz-appearance:none) { /* Mozilla-only */
  button::-moz-focus-inner { /* reset any predefined properties */ 
    border: none;
    padding: 0;
  }
  button:focus { /* add outline to focus pseudo-class */
    outline-style: dotted;
    outline-width: 1px;
  }
}

Contoh di atas hanya memodifikasi buttonelemen untuk meningkatkan keterbacaan, tetapi dapat dengan mudah diperluas untuk memodifikasi input[type="button"], input[type="submit"]dan input[type="reset"]elemen juga. Anda juga bisa menggunakan kelas, jika Anda ingin membuat hanya tombol tertentu yang terlihat seperti jangkar.

Lihat JSFiddle ini untuk demo langsung.

Harap perhatikan juga bahwa ini menggunakan penataan jangkar standar untuk tombol (mis. Warna teks biru). Jadi jika Anda ingin mengubah warna teks atau hal lain dari jangkar & tombol, Anda harus melakukan ini setelah CSS di atas.


Kode asli (lihat cuplikan) dalam jawaban ini benar-benar berbeda dan tidak lengkap.


Mengapa Anda perlu outline-offset: 0;jika garis tidak disetel?
Mohamad

Saya harus menambahkan box-shadow: noneuntuk menghapus semua gaya pada tombol
Tobbe

Satu lagi:text-transform: none;
Shone Tow

75

Jika Anda tidak keberatan menggunakan bootstrap twitter, saya sarankan Anda cukup menggunakan kelas tautan .

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-link">Link</button>

Saya harap ini membantu seseorang :) Semoga harimu menyenangkan!


7
Ini berfungsi dengan baik tetapi meninggalkan beberapa lapisan yang berlawanan dengan tautan <a> yang sebenarnya. Cukup tambahkan gaya padding: 0! Penting dan itu emas. Terima kasih!
David

Hal ini tampaknya memicu validasi formulir dengan validasi jquery
Paul Becker

Ini bukan solusi yang andal. Tidak hanya secara halus memecah garis tengah vertikal, tetapi secara implisit menonaktifkan penataan teks dan perubahan ukuran font.
Radon Rosborough

5

coba gunakan pseudoclass css :focus

input[type="button"], input[type="button"]:focus {
  /* your style goes here */
}

sunting untuk tautan dan penggunaan acara onclick (Anda tidak boleh menggunakan inline javascript eventhandler, tetapi demi kesederhanaan saya akan menggunakannya di sini):

<a href="some/page.php" title="perform some js action" onclick="callFunction(this.href);return false;">watch and learn</a>

dengan this.href Anda bahkan dapat mengakses target tautan dalam fungsi Anda. return falsehanya akan mencegah browser mengikuti tautan ketika diklik.

jika javascript dinonaktifkan, tautan akan berfungsi sebagai tautan normal dan muat saja some/page.php— jika Anda ingin tautan Anda mati saat js dinonaktifkan gunakanhref="#"


saya akan menggunakannya tetapi saya tidak begitu yakin tentang perubahan apa yang berlaku sehingga tombol tidak mendapatkan indentasi.

ya. N bahkan setelah memberikan paddina sebagai 0 indentasi masih tetap

4

Anda tidak dapat mendesain tombol sebagai tautan yang andal di seluruh browser. Saya sudah mencobanya, tetapi selalu ada beberapa masalah padding, margin atau font yang aneh di beberapa browser. Baik tinggal dengan membiarkan tombol terlihat seperti tombol, atau gunakan onClick dan preventDefault pada tautan.


2
Itu benar kembali ketika browser menggunakan widget asli. Apakah masih berlaku untuk peramban terbaru yang bahkan jauh?
aij

1
Ini tahun 2017 dan FireFox saya masih menggunakan widget asli.
Michael Scheper

2

Anda dapat mencapai ini menggunakan css sederhana seperti yang ditunjukkan pada contoh di bawah ini

button {
    overflow: visible;
    width: auto;
}
button.link {
    font-family: "Verdana" sans-serif;
    font-size: 1em;
    text-align: left;
    color: blue;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
   
    -moz-user-select: text;
 
    /* override all your button styles here if there are any others */
}
button.link span {
    text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
    color: black;
}
<button type="submit" class="link"><span>Button as Link</span></button>

masukkan deskripsi gambar di sini

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.