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

Question

Here is how it looks from my source files

And here is how it looks from where it is hosted

Obviously alot wrong with it but the one thing I'm most worried about is that border around the blue button.

Here's the HTML code for each button.

Blue Button

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

Grey Button

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

---

and the CSS.

Blue Button

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

Grey Button

.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

If you want a solid, single-colour border, then:

border-style: solid;

It looks like it's set to something like inset or outset which are meant to create a quasi-3D effect, Windows 98-style.

If you don't want any border at all, then:

border: 0;

Answer 2

I'm not sure what do you want exactly but why are you wrapping an <a> tag around a <button> ? try this as in this JS Fiddle

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

Answer 3

border:none; will get rid of the border.

As an aside, having a button inside of a link sounds redundant. Why not style the link instead (and apply display:inline-block; )?

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