按钮周围有一个奇怪的边框，我该如何摆脱它？

Question

Here is how it looks from my source files

And here is how it looks from where it is hosted

显然有很多错，但我最担心的一件事是蓝色按钮周围的边框。

这是每个按钮的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;
}

Answer 1

如果你想要一个纯色的单色边框，那么：

border-style: solid;

它似乎设置为类似inset或outset的内容，旨在创建一种准3D效果，Windows 98风格。

如果你根本不想要任何边框，那么：

border: 0;

Answer 2

我不确定您到底想要什么，但为什么要在<a>周围包裹<button>代码？试试这个JS Fiddle

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

Answer 3

border:none;将摆脱边界。

顺便说一句，在链接中有一个按钮听起来多余。为什么不改变链接的样式（并应用display:inline-block;）？

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