How to make button with 2 lights?

Question

I need to make a button that was made in Figma by adding two elements as a mask, but have no idea how to. Here is image of that button:

The problem is that it is impossible to make the glow effect that is present in the photo using the gradient overlay, but I have an idea how to do something similar, I will try now

You might want to take a look at this question : https://stackoverflow.com/questions/71326724/combine-2-linear-gradients-using-background-css or even better to further see how to play with multiple gradients at the same time : https://stackoverflow.com/questions/60209914/is-this-possible-to-create-2-axis-4-color-gradient-in-css-bilinear-gradient — Oddrigue, Jan 11 '23 at 17:07

score 3 · Answer 1 · answered Jan 11 '23 at 17:34

Something like this and it is less code:

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>

score 3 · Answer 2 · answered Jan 11 '23 at 17:54

here's a rough approximation using background-image 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>

score 2 · Answer 3 · edited Jan 11 '23 at 19:31

My brain refused to work at first, but then I solved the problem anyway, and I felt ashamed of what I had asked. In any case, someone might need an answer.

First of all you need to add blocks for that lights:

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

After that, simply adding css styles, where lights are positioned absolute, and overflow in parents block is hidden

  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);
    }
  }

Using gradient would be the proper way to achieve gradient – Huangism Jan 11 '23 at 17:36 — Huangism, Jan 11 '23 at 17:36

How to make button with 2 lights?

3 Answers3