按鈕周圍有一個奇怪的邊框，我該如何擺脫它？

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

Answer 1

如果您想要純色單色邊框，則：

border-style: solid;

看起來它被設置為inset或outset類的東西，旨在創建 Windows 98 風格的准 3D 效果。

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

border: 0;

Answer 2

我不確定你到底想要什么，但你為什么要在<button>周圍包裹一個<a>標簽？ 在這個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>