Comment créer la bordure d'un bouton pour qu'il flotte de quelques pixels en dehors de son contenu ?

Question

Je souhaite créer une bordure comme celle ci-dessous, mais je ne sais pas comment y parvenir en utilisant CSS, quelqu'un peut-il m'aider ?

Le code actuel contient le bouton que je veux avec ce 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>

J'ai essayé d'utiliser une bordure avec un contour, et j'ai également essayé d'utiliser une bordure après :avant pour essayer de la faire fonctionner, mais en vain.

Answer 1

Je n'ai pas exactement fait correspondre vos boutons, mais suffisamment pour vous donner une idée de comment faire.

J'utilise une bordure pour la partie blanche. Tracez ensuite les lignes fines extérieures.

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>