There is a weird border around the Button, how can I get rid of it?


Lindsay

This is how my source file looks like

This is what it looks like from the hosting location

Obviously it has a lot of issues, but one of the things that worries me the most is the border around the blue button.

Here is 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 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;
}
minimally invasive

I'm not sure what exactly you want, but why put a label around <a>it <button>? Try it like this JS fiddle

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

Related


How can I get rid of the white outline around the button?

GlaciemTech How can I get the white outline from this button? It's CSS, let me know if you think it's caused by something. .btn { background: linear-gradient(45deg, rgba(51, 197, 230, 0.5) 0%,rgba(51, 230, 131, 0.5) 50%,rgba(108,0,153,0.65) 100%); border-r

How can I get rid of this weird space?

which one I'm a total beginner and I really don't know why there is a space between the bottom of my image and the border of my wrapping div! What's this? ? ? <div class="myItem"> <img src="https://picsum.photos/100"> </div> .myItem { border: 5px solid bl

How can I get rid of the top border of this table header?

username I'm using bootstrap 2.3.2 and have a table with 2 headers (only 1 header is displayed at a time). this is my violin <table class="table table-hover"> <thead> <tr class="view_1"><th>Header 1</th></tr> <tr class="view_2"><th>Header 2

How can I get rid of the top border of this table header?

username I'm using bootstrap 2.3.2 and have a table with 2 headers (only 1 header is displayed at a time). this is my violin <table class="table table-hover"> <thead> <tr class="view_1"><th>Header 1</th></tr> <tr class="view_2"><th>Header 2

Weird border with gradient around submit button. How to delete?

Ilkez I have a weird problem that I can't seem to fix, and I'm not sure why it's showing up here. I'm trying to style a form button and I'm getting this weird outline after styling and I'm not coding in http://imgur.com/QpCPRju Here is the code: button { bac

Weird border with gradient around submit button. How to delete?

Ilkez I have a weird problem that I can't seem to fix, and I'm not sure why it's showing up here. I'm trying to style a form button and I'm getting this weird outline after styling and I'm not coding in http://imgur.com/QpCPRju Here is the code: button { bac

Weird border with gradient around submit button. How to remove?

Ilkez I have this weird problem that I can't seem to fix, and I'm not sure why it's showing up here. I'm trying to style a form button and I'm getting this weird outline after styling and I'm not coding in http://imgur.com/QpCPRju Here is the code: button {