Bagaimana cara membuat tombol terlihat seperti tautan?

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?

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.

/* Obsolete code! Please use the code of the updated answer. */

input[type="button"], input[type="button"]:focus, input[type="button"]:active,  
button, button:focus, button:active {
	/* Remove all decorations to look like normal text */
	background: none;
	border: none;
	display: inline;
	font: inherit;
	margin: 0;
	padding: 0;
	outline: none;
	outline-offset: 0;
	/* Additional styles to look like a link */
	color: blue;
	cursor: pointer;
	text-decoration: underline;
}
/* Remove extra space inside buttons in Firefox */
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
    border: none;
    padding: 0;
}

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!

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

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.

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>