Я хочу сделать границу кнопки прозрачной внутри белого фона

Question

Я хочу сделать границу кнопки прозрачной, как на картинке. Один div с белым фоновым цветом, а затем внутри я хочу добавить кнопку с полем в 15px или отступом и сделать ее прозрачной.

<div class="row">
 <div class="col-md-3 col-12" style="background-color: #fff;">
    <p>Thousand of Local Listings.</p>

 <div style="padding: 15px;background: transparent;z-index:9999;">

    <a href="" style="">START HERE</a>
  </div>
 </div>
</div>

Answer 1

Вы можете смоделировать это, используя box-shadow и прозрачную границу:

.box {
  border: 1px solid;
  overflow: hidden;
  width: 300px;
  padding: 20px 50px;
}

button {
  border: 10px solid transparent;
  padding: 10px;
  background: #000 padding-box;
  color: #fff;
  box-shadow: 0 0 0 200vw #fff;
}

.box>*:not(button) {
  position: relative;
}

body {
  background: gray;
}

<div class="box">
  <h2>Title</h2>
  <p>some text here and there</p>
  <button>A button here</button>
</div>