Кнопка имеет странную границу вокруг него, как мне от нее избавиться?

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

Я не уверен, что вы хотите точно, но почему вы обертывание <a> тега вокруг <button>? попробуйте это как в этом JS Fiddle

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

Answer 2

Если вы хотите твердый, одноцветный границу, то:

border-style: solid; 

Похоже, он настроен на что-то вроде inset или outset, которые предназначены для создания квази-3D-эффекта, Windows 98-стиля.

Если вы не хотите какие-либо границ вообще, то:

border: 0; 

Answer 3

border:none; избавится от границы.

Как в сторону, наличие кнопки внутри ссылки звучит излишне. Почему бы не создать ссылку вместо этого (и применить display:inline-block;)?

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