类似于这样的东西，而且代码更少：

button {
  border: 0;
  border-radius: 12px;
  padding: 12px 48px;
  color: white;
  font-size: 14px;
  text-transform: uppercase;
  background:
    linear-gradient(45deg,
                    rgb(99,86,53) 00%,
                    rgb(99,86,53) 10%,
                    rgb(37,37,37) 47%,
                    rgb(37,37,37) 52%,
                    rgb(50,80,96) 90%,
                    rgb(50,80,96) 100%);
}

<button>Hello</button>

这里是使用背景图像radial-gradient的粗略近似

html { background: #111 }

.btn {
  width: 200px;
  height: 60px;
  border-radius: 10px;
  font-size: 18px;
  border:0;
}

.bg-two-lights {
  color: white;
  background-color: #222222;
  background-image:
    radial-gradient(circle at 130% -50%, #ff880088 0%, transparent 50%),
    radial-gradient(circle at -30% 150%, #00ffff88 0%, transparent 50%);
}

<button class="btn bg-two-lights">
  BUTTON
</button>

起初我的大脑拒绝工作，但后来我还是解决了这个问题，我为我所问的感到羞愧。无论如何，有人可能需要一个答案。
首先，您需要为灯光添加块：

<button class="header__donate-button">donate
  <div class="yellow-light"></div>
  <div class="blue-light"></div>
</button>

之后，简单地添加css样式，其中灯光绝对定位，并隐藏父块中的溢出

header__donate-button {
    width: 11.875rem;
    height: 3rem
    color: #ffffff;
    background: #1A1A1A;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    .yellow-light {
      position: absolute;
      width: 84px;
      height: 84px;
      bottom: -3rem;
      left: -3rem;
      background: #e6bc50;
      filter: blur(50px);
    }
    .blue-light {
      position: absolute;
      width: 84px;
      height: 84px;
      
      top: -3rem;
      right: -3rem;
      background: #50b0e6;
      filter: blur(50px);
    }
  }