Làm thế nào để làm cho nút trông giống như một liên kết?

Tôi cần làm cho một nút trông giống như một liên kết bằng CSS. Các thay đổi đã được thực hiện nhưng khi tôi nhấp vào nó, nó sẽ hiển thị như thể nó được ấn như trong một nút. Bất kỳ ý tưởng làm thế nào để loại bỏ điều đó, để nút hoạt động như một liên kết ngay cả khi nhấp vào?

Mã của câu trả lời được chấp nhận hoạt động trong hầu hết các trường hợp, nhưng để có được một nút thực sự hoạt động giống như một liên kết, bạn cần thêm một chút mã. Điều đặc biệt khó khăn là có được kiểu dáng của các nút tập trung ngay trên Firefox (Mozilla).

CSS sau đây đảm bảo rằng các neo và nút có cùng thuộc tính CSS và hoạt động giống nhau trên tất cả các trình duyệt phổ biến:

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

Ví dụ trên chỉ sửa đổi buttoncác yếu tố để cải thiện khả năng đọc, nhưng nó có thể dễ dàng được mở rộng để sửa đổi input[type="button"], input[type="submit"]và input[type="reset"]các yếu tố. Bạn cũng có thể sử dụng một lớp, nếu bạn muốn làm cho chỉ một số nút nhất định trông giống như neo.

Xem JSFiddle này để xem bản demo trực tiếp.

Cũng xin lưu ý rằng điều này áp dụng kiểu neo mặc định cho các nút (ví dụ: màu văn bản màu xanh). Vì vậy, nếu bạn muốn thay đổi màu văn bản hoặc bất cứ thứ gì khác của neo & nút, bạn nên thực hiện việc này sau CSS ở trên.

Mã ban đầu (xem đoạn trích) trong câu trả lời này là hoàn toàn khác nhau và không đầy đủ.

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

Nếu bạn không phiền khi sử dụng twitter bootstrap, tôi khuyên bạn chỉ nên sử dụng lớp liên kết .

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

Tôi hy vọng điều này sẽ giúp ai đó :) Chúc một ngày tốt lành!

thử sử dụng giả css :focus

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

chỉnh sửa như đối với các liên kết và các sự kiện onclick sử dụng (bạn không nên sử dụng các trình tạo sự kiện javascript nội tuyến, nhưng để đơn giản, tôi sẽ sử dụng chúng ở đây):

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

với this.href bạn thậm chí có thể truy cập vào mục tiêu của liên kết trong chức năng của mình. return falsesẽ chỉ ngăn các trình duyệt theo liên kết khi nhấp vào.

Nếu javascript bị vô hiệu hóa, liên kết sẽ hoạt động như một liên kết bình thường và chỉ cần tải xuống some/page.phpnếu bạn muốn liên kết của mình bị chết khi js bị vô hiệu hóa sử dụnghref="#"

Bạn không thể tạo kiểu cho các nút như các liên kết đáng tin cậy trên các trình duyệt. Tôi đã thử nó, nhưng luôn có một số vấn đề về phần đệm, lề hoặc phông chữ kỳ lạ trong một số trình duyệt. Sống với việc để nút trông giống như một nút hoặc sử dụng onClick và ngăn chặn Lỗi trên một liên kết.

Bạn có thể đạt được điều này bằng cách sử dụng css đơn giản như trong ví dụ dưới đây

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>