How do I create a button's border so that it floats a few pixels outside of its content?

Question

I want to create a border like the one below but not sure how to achieve this using CSS, can anyone help?

The current code contains the button I want this style.

<li class="nav-item button">
                    <a class="nav-link" href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
                        </svg>
                    </a>
                </li>

I've tried using a border with an outline, and also tried using a border after :before to try and get it to work, but to no avail.

Answer 1

I don't have an exact match for your button, but it's enough to give you an idea of ​​how to do it.

I use a border for the white part. Then outline the outer thin lines.

ul{list-style:none}
.nav-link{
  display:inline-block;
  background:red;
  padding:20px;
  border:10px #fff solid;
  border-radius:50%;
  outline:1px red solid;
  color:#fff;
}

<ul><li class="nav-item button">
                    <a class="nav-link" href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
                        </svg>
                    </a>
                </li></ul>