How to style an anchor as a button in Bootstrap 4?

Question

When I use a button, it looks like this in Bootstrap 4:

<button type="button" class="btn btn-primary" target="_blank">Download</button>

When I use an anchor instead with the buttons styling, it looks like this:

<a type="button" class="btn btn-primary" target="_blank">Download</a>

How can I get my anchor to look like a flat button?

Answer 1

First of all remove type="button" from <a>. You need to update css for and write custom css for <a> tag.

a.btn {border-radius: .25rem; border: 1px solid transparent; padding: .5rem 1rem; color: #fff; }
a.btn:hover { border-radius: .25rem; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-primary" target="_blank">Download</button>
<a class="btn btn-primary" target="_blank" href="#">Download</a>