HTML & CSS Line before a button

[Johna]

Hi everyone,
when I put two buttons side-by-side I get a short line before the second button. This only happens when I have two buttons, if I remove the first button, the line isn't there anymore.
I've attached pictures to show this.



How can I remove this line?

Here's my code:

<div class="buttons">
  <a href="/test">
    <button class="btns btn1" type="button" name="button">Take The Test</button>
  </a>
  <a href="/test/all-tests">
    <button class="btns" type="button" name="button">Browse All Tests</button>
  </a>
</div>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

.btn1 {
  margin-right: 20px;
}

.btns {
  cursor: pointer;
  font-family: Roboto;
  padding: 10px 20px;
  background-color: #FFFFFF;
  border: none;
  border-radius: 100px;
  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.2));
}

Thanks

 

[Johna]

Ok so I figured this out.
It's because the <a></a> element automatically adds an underline to the text inside it, so to remove it I had to add this to my CSS:

.buttons a {
  text-decoration: none;
}