JSFiddle - React, Tailwind, and code Playground

HTML

<section class="preview-container">
  <div class="preview">
     <button> <span class="text">Button</span>
       <span class="blob"></span>
       <span class="blob"></span>
    </button>
  </div>
</section>

CSS

.preview-container {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: stretch;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  background: black;
  border-radius: 20px;
}

.preview {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

button {
 position: relative;
 font-family: inherit;
 font-size: 18px;
 border-radius: 40em;
 width: 8em;
 height: 3em;
 z-index: 1;
 color: white;
 overflow: hidden;
 border: 1px solid rgba(255, 255, 255, 0.18);
}

button .text {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 line-height: 3em;
 border: none;
 background: linear-gradient(rgba(255, 255, 255, 0.473), rgba(150, 150, 150, 0.25));
 z-index: 1;
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
}

button .blob {
 position: absolute;
 z-index: -1;
 border-radius: 5em;
 width: 5em;
 height: 5em;
 background: purple;
 top: -20px;
 left: -20px;
}

button .blob:nth-child(2) {
 left: 20px;
 top: 0;
 width: 10em;
 background: #ff930f;
}