如何使按鈕看起來像一個鏈接？

Question

我需要使用 CSS 使按鈕看起來像一個鏈接。 更改已完成，但是當我單擊它時，它顯示為好像它被按下按鈕一樣。 知道如何刪除它，以便即使單擊該按鈕也可以作為鏈接工作？

Answer 1

 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>

Answer 2

接受的答案的代碼適用於大多數情況，但要獲得一個真正表現得像鏈接的按鈕，您需要更多的代碼。 在 Firefox (Mozilla) 上獲得焦點按鈕的樣式特別棘手。

以下 CSS 確保錨點和按鈕具有相同的 CSS 屬性，並且在所有常見瀏覽器上的行為都相同：

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

上面的例子只修改button元素以提高可讀性，但它可以很容易地擴展到修改input[type="button"], input[type="submit"]和input[type="reset"]元素。 如果您只想使某些按鈕看起來像錨點，您也可以使用類。

請參閱此 JSFiddle以獲取現場演示。

另請注意，這將默認錨定樣式應用於按鈕（例如藍色文本顏色）。 因此，如果您想更改文本顏色或錨點和按鈕的任何其他內容，您應該在上面的 CSS之后執行此操作。

---

此答案中的原始代碼（請參閱代碼段）完全不同且不完整。

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

Answer 3

如果您不介意使用twitter bootstrap，我建議您只需使用 鏈接類。

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

我希望這對某人有所幫助:) 祝您有美好的一天！

Answer 4

嘗試使用 css 偽類:focus

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

編輯鏈接和 onclick 事件使用（您不應該使用內聯 javascript 事件處理程序，但為了簡單起見，我將在此處使用它們）：

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

使用 this.href，您甚至可以訪問函數中鏈接的目標。 return false只會阻止瀏覽器在單擊時跟隨鏈接。

如果禁用JavaScript的鏈接將作為一個正常的鏈接，只加載some/page.php -如果你希望你的鏈接是死的時候JS是殘疾人使用href="#"

Answer 5

您無法在整個瀏覽器中可靠地將按鈕樣式設置為鏈接。 我試過了，但在某些瀏覽器中總是存在一些奇怪的填充、邊距或字體問題。 要么讓按鈕看起來像一個按鈕，要么在鏈接上使用 onClick 和 preventDefault 。

Answer 6

您可以使用簡單的 css 實現這一點，如下例所示

 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>

Answer 7

我認為這很容易用很少的行來完成。 這是我的解決方案

 .buttonToLink{ background: none; border: none; color: red } .buttonToLink:hover{ background: none; text-decoration: underline; }

 <button class="buttonToLink">A simple link button</button>

Answer 8

 button {
  text-decoration: underline;
  cursor: pointer;
  }

 <button onClick="javascript:window.location.href='link'">Domain</button>