CODEWITHSUNDEEP
htmlcss
Linxy
Linxy

Reputation: 35

Button has a weird border around it, how do I get rid of it?

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

Upvotes: 3

Views: 4895

Answers (3)

Donnie D&#39;Amato
Donnie D&#39;Amato

Reputation: 3940

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>

Upvotes: 1

Mi-Creativity
Mi-Creativity

Reputation: 9654

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>

Upvotes: 2

kamilk
kamilk

Reputation: 4039

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;

Upvotes: 3

Related Questions