Html 移除按钮周围的灰色框

正如标题所说，我很难移除按钮周围的灰色框。我尝试过使用

outline:none

，但没有效果

您可以在这里看到（）：

.btn组{
背景：#4abdac；
背景图像：-webkit线性渐变（顶部，#4abdac，4abdac）；
背景图像：-moz线性梯度（顶部，#4abdac，4abdac）；
背景图像：-ms线性梯度（顶部，#4abdac，4abdac）；
背景图像：-o-线性梯度（顶部，#4abdac，4abdac）；
背景图像：线性渐变（到底部，#4abdac，4abdac）；
-webkit边界半径：33；
-莫兹边界半径：33；
边界半径：33像素；
字体系列：Arial；
颜色：#000；
字体大小：20px；
填充：10px 20px 10px 20px；
文字装饰：无；
}

---

只需移除

按钮

标签，如下所示：

---

只需将代码替换为

<style>
.btn-group {
  background: #4abdac;
  background-image: -webkit-linear-gradient(top, #4abdac, 4abdac);
  background-image: -moz-linear-gradient(top, #4abdac, 4abdac);
  background-image: -ms-linear-gradient(top, #4abdac, 4abdac);
  background-image: -o-linear-gradient(top, #4abdac, 4abdac);
  background-image: linear-gradient(to bottom, #4abdac, 4abdac);
  -webkit-border-radius: 33;
  -moz-border-radius: 33;
  border-radius: 33px;
  font-family: Arial;
  color: #000;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}
</style>
<div>
<a class="btn-group" style="color: #000;" href="www.example.com"><span style="color: #ffffff;">Example Text&nbsp;</span></a></div>

.btn组{
背景：#4abdac；
背景图像：-webkit线性渐变（顶部，#4abdac，4abdac）；
背景图像：-moz线性梯度（顶部，#4abdac，4abdac）；
背景图像：-ms线性梯度（顶部，#4abdac，4abdac）；
背景图像：-o-线性梯度（顶部，#4abdac，4abdac）；
背景图像：线性渐变（到底部，#4abdac，4abdac）；
-webkit边界半径：33；
-莫兹边界半径：33；
边界半径：33像素；
字体系列：Arial；
颜色：#000；
字体大小：20px；
填充：10px 20px 10px 20px；
文字装饰：无；
}

将此css与您的css代码放在一起

button{
  border: none;
  background: transparent;
}

---

将样式应用于按钮元素并抑制div：

<a  style="color: #000;" href="www.example.com"><button class="btn-group">
<span style="color: #ffffff;">Example Text&nbsp;</span></button></a>

---

在您的问题中，您没有删除按钮的默认样式，这就是为什么您使用灰色背景。您可以使用此样式删除它：

button {
   border:none;
   background-color:transparent;
   outline:none;
}

然后，您不需要在按钮内使用锚定标记-只需按如下方式调用：

.btn组{
背景：#4abdac；
背景图像：-webkit线性渐变（顶部，#4abdac，4abdac）；
背景图像：-moz线性梯度（顶部，#4abdac，4abdac）；
背景图像：-ms线性梯度（顶部，#4abdac，4abdac）；
背景图像：-o-线性梯度（顶部，#4abdac，4abdac）；
背景图像：线性渐变（到底部，#4abdac，4abdac）；
-webkit边界半径：33；
-莫兹边界半径：33；
边界半径：33像素；
字体系列：Arial；
颜色：#fff；
字体大小：20px；
填充：10px 20px 10px 20px；
文字装饰：无；
边界：无；
}

示例文本

删除按钮标记并将样式显示：内联块添加到标记。因为标记是内联元素。我们必须将块元素集样式更改为display:inline块

.btn组{
背景：#4abdac；
背景图像：-webkit线性渐变（顶部，#4abdac，4abdac）；
背景图像：-moz线性梯度（顶部，#4abdac，4abdac）；
背景图像：-ms线性梯度（顶部，#4abdac，4abdac）；
背景图像：-o-线性梯度（顶部，#4abdac，4abdac）；
背景图像：线性渐变（到底部，#4abdac，4abdac）；
-webkit边界半径：33；
-莫兹边界半径：33；
边界半径：33像素；
字体系列：Arial；
颜色：#000；
字体大小：20px；
填充：10px 20px 10px 20px；
文字装饰：无；
边缘顶部：10px；
显示：内联块；
}

---

删除按钮tagyup收到了抱歉甚至没有注意到谢谢！很酷，谢谢，我会用它来代替它-还是个新手，所以所有提示help@Mangolicious如果此答案对您来说是“使用完整”

transperant

应该是

透明的