Css 如何使按钮看起来像一个链接？

我需要使一个按钮看起来像一个链接使用CSS。更改已完成，但当我单击它时，它会显示为按下按钮。您知道如何删除该按钮，以便即使单击该按钮也可以作为链接使用吗？

尝试使用css伪类

：focus

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

编辑对于链接和onclick事件的使用（您不应该使用内联javascript事件处理程序，但为了简单起见，我将在这里使用它们）：

使用this.href，您甚至可以访问函数中链接的目标

return false

只会阻止浏览器在单击时跟随链接

---

如果禁用javascript，该链接将作为正常链接使用，只需加载

some/page.php

——如果您希望禁用js时链接失效，请使用

href=“#”

您无法在整个浏览器中可靠地将按钮样式设置为链接。我试过了，但在某些浏览器中总是会出现一些奇怪的填充、边距或字体问题。要么让按钮看起来像按钮，要么在链接上使用onClick和preventDefault。

按钮{
背景：无！重要；
边界：无；
填充：0！重要；
/*可选的*/
字体系列：arial，无衬线；
/*输入具有特定于操作系统的字体系列*/
颜色：#069；
文字装饰：下划线；
光标：指针；
}

---

你的按钮看起来像链接

接受答案的代码在大多数情况下都有效，但要得到一个真正像链接的按钮，你需要多一点代码。在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;
  }
}

上面的示例仅修改

按钮

元素以提高可读性，但它可以轻松扩展为修改

输入[type=“button”]、输入[type=“submit”]

和

输入[type=“reset”]

元素。如果只想使某些按钮看起来像锚，还可以使用类

请参阅以获取实时演示

还请注意，这将默认锚样式应用于按钮（例如蓝色文本颜色）。因此，如果您想要更改文本颜色或锚定和按钮的任何其他内容，您应该在上面的CSS之后进行更改

---

这个答案中的原始代码（见代码片段）完全不同且不完整

/*过时的代码！请使用更新答案的代码*/
输入[type=“button”]、输入[type=“button”]：焦点、输入[type=“button”]：激活，
按钮，按钮：聚焦，按钮：激活{
/*删除所有装饰，使其看起来像普通文本*/
背景：无；
边界：无；
显示：内联；
字体：继承；
保证金：0；
填充：0；
大纲：无；
轮廓偏移：0；
/*看起来像链接的其他样式*/
颜色：蓝色；
光标：指针；
文字装饰：下划线；
}
/*删除Firefox中按钮内的额外空间*/
输入[type=“button”]：-moz焦点内部，
按钮：：-moz焦点内部{
边界：无；
填充：0；
}

如果您不介意使用，我建议您只需使用

Link

您可以使用下面的示例中所示的简单css来实现这一点

按钮{
溢出：可见；
宽度：自动；
}
按钮链接{
字体系列：“Verdana”无衬线；
字号：1em；
文本对齐：左对齐；
颜色：蓝色；
背景：无；
保证金：0；
填充：0；
边界：无；
光标：指针；
-moz用户选择：文本；
/*如果还有其他按钮样式，请在此处覆盖所有按钮样式*/
}
按钮链接跨度{
文字装饰：下划线；
}
按钮链接：悬停范围，
按钮链接：焦点范围{
颜色：黑色；
}

---

按钮作为链接

我认为这很容易做到，只需要很少的行。这是我的解决办法

.button链接{
背景：无；
边界：无；
颜色：红色
}
.按钮链接：悬停{
背景：无；
文字装饰：下划线；
}

---

一个简单的链接按钮

我会使用它，但我不太确定要应用哪些更改，这样按钮就不会缩进。是的。N即使将paddina设为0，缩进仍然保留，包括链接上的单击事件与上一样简单buttons@knittl，@cletus实际上，链接和按钮在HTML中有着非常不同的含义。你应该读书。将按钮样式设置为链接可能不是一个好主意，但这取决于UI设计，而使用链接则是违反HTML规范的。（1） button具有type=“submit”（2）按钮具有奇特的样式，即具有可变长度的背景图像。对于按钮，即使您希望它看起来像一个链接，它在语义上也可能更正确。例如，想象一对“全部展开|全部折叠”链接可以更改页面上的某些内容。单击这些按钮会导致一个操作，但不会将用户带到任何地方-语义是按钮的语义。但是，由于外观原因，设计师可能有特定的链接。所以这实际上是一个很好的问题。我使用按钮而不是链接，因为用链接触发JS方法，我被迫链接到

，然后使用

event.preventDefault（）

。这很糟糕，链接到

javascript:void（0）。我在小提琴上的细微变化-移动了文本装饰：下划线规则以操作按钮：悬停。请参见my中的。如果不希望所有按钮都设置为链接样式，请使用类似于
button.link{…styles…}
的样式来定义样式，然后
您的按钮
。这也避免了使用
！重要信息
这始终是一个好主意。
边框底部
看起来带下划线有点麻烦。这个答案在其他方面是一个很好的开始，但这里的第二个答案确实更全面，并且有正确的下划线解决方案；大多数浏览器使用t
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;
  }
}