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:
Thanks
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:
HTML:
<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>
CSS:
@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