0

I just started learning to code today and I have come across this problem. I get this white border around my get started button and I can't figure out why. When I change the margin-top, it gets smaller, but the space between the text above it gets smaller as well, witch I do not want. Thanks for the help in advance. (I don't know if the layout of this question is done right, so any tips on doing that would also be helpful).

enter image description here

.main__btn {
  font-size: 1rem;
  background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
  padding: 14px 32px;
  border: none;
  border-radius: 4px;
  color: #fff;
  margin-top: 2rem;
  cursor: pointer;
  position: relative;
  transition: all 0.35s;
  outline: none;
}
<div class="main">
  <div class="main__container">
    <div class="main__content">
      <h1>NEXT GENERATION</h1>
      <h2>TECHNOLOGY</h2>
      <P>See what make us different.</P>
      <button><div class="main__btn"><a href="/">Get Started</a></div></button>
    </div>
    <div class="main__img--container"><img src="images/pic1.svg" alt="pic" id="main__img"></div>
  </div>
</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
Benjamin Grubbe
  • 1

1 Answers1

0

There is a 2px default border on the button

.main__btn {
  font-size: 1rem;
  background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
  padding: 14px 32px;
  border: none;
  border-radius: 4px;
  color: #fff;
  margin-top: 2rem;
  cursor: pointer;
  position: relative;
  transition: all 0.35s;
  outline: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.main {
  padding: 1em;
}

button {
  border: none;
}
<div class="main">
  <div class="main__container">
    <div class="main__content">
      <h1>NEXT GENERATION</h1>
      <h2>TECHNOLOGY</h2>
      <P>See what make us different.</P>
      <button><div class="main__btn"><a href="/">Get Started</a></div></button>
    </div>
  </div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161