Bagaimanakah cara saya mencipta sempadan butang supaya ia terapung beberapa piksel di luar kandungannya?

Question

Saya ingin membuat sempadan seperti di bawah tetapi tidak pasti bagaimana untuk mencapai ini menggunakan CSS, sesiapa boleh membantu?

Kod semasa mengandungi butang yang saya mahu dengan gaya ini.

<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>

Saya telah mencuba menggunakan sempadan dengan garis besar, dan juga cuba menggunakan sempadan selepas :sebelum untuk mencuba dan memastikannya berfungsi, tetapi tidak berjaya.

Answer 1

Saya tidak memadankan butang anda dengan tepat, tetapi cukup untuk memberi anda idea tentang cara melakukannya.

Saya guna border untuk bahagian putih. Kemudian gariskan garis nipis luar.

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>