按钮周围有奇怪的边框，如何去掉它？

Question

以下是翻译的结果：

这是我的源文件中的样子

这是它托管的位置中的样子

显然有很多问题，但我最担心的是蓝色按钮周围的边框。

以下是每个按钮的HTML代码。

蓝色按钮

<a href="#" ><button  class="btn" type="button">View The Line Up</button></a>

灰色按钮

<a href="#" ><button  class="btn2" type="button">View The Line Up!</button></a>

---

以及CSS。

蓝色按钮

.btn {

  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
  background: #358cb1;
  padding: 10px 30px 10px 30px;
  text-decoration: none;
  float: left;
  margin-top: 20px;
}

.btn:hover {
  background: #3cb0fd;
  text-decoration: none;
}

灰色按钮

.btn2 {
  -webkit-border-radius: 31;
  -moz-border-radius: 31;
  border-radius: 31px;
  font-family: Arial;
  color: #000000;
  font-size: 14px;
  padding: 10px 30px 10px 30px;
  border: solid #000000 1px;
  text-decoration: none;
  float: left;
  margin-top: 20px;
  margin-left: 20px;
}

.btn2:hover {
    background: #acb0b3;
  text-decoration: none;
}

- Linxy

---

为什么要用链接标签<a>来包裹<button>按钮？ - Marc Audet

不需要使用<button>标签来代替<a>标签，你可以直接将所有应用在<button>标签上的CSS属性应用到<a>标签上。 - Skyyy

Answer 1

如果您想要一个坚实的单色边框，则：

border-style: solid;

看起来它被设置为类似于inset或outset的样式，这些样式旨在创建准3D效果，类似于Windows 98。

如果您不想要任何边框，则可以：

border: 0;

- kamilk

---

这使它看起来像这样。编辑：Mi-Creativity找到了一个解决方案。 - Linxy

啊，好的，你根本不要任何边框。我已经更新了我的回答。 - kamilk

Answer 2

我不确定你想要什么，但为什么要在 <button> 周围包装一个 <a> 标签呢？可以尝试这个 JS Fiddle 中的方法。

<a href="" class="btn">View The Line Up</a>
<a href="" class="btn2">View The Line Up!</a>

- Mi-Creativity

---

这个有效了。谢谢。我以前从来没有用过按钮，对任何类型的编程都非常陌生。再次感谢。 - Linxy

HTML按钮元素具有默认样式（背景和边框），您需要覆盖它们。 - Donnie D'Amato

不客气，我很高兴能帮到你。网络上有许多资源可以帮助你更快更好地学习，例如https://developer.mozilla.org/en-US/docs/Web/HTML和http://www.w3schools.com/html/default.asp，此外还有YouTube上的视频。 - Mi-Creativity

Answer 3

border:none;将去掉边框。

顺便说一下，在链接内部放置按钮似乎有些多余。为什么不样式化链接（并应用display:inline-block;）呢？

<a href="#" class="btn">My button text</a>

- Donnie D'Amato