.glossy-btn{
  display:inline-block;
  border: none;
  padding: 10px 30px;
  cursor: pointer;
  border-radius: 4px;

  /* outer dark edge */
  background: linear-gradient(#7ec1eaaa, #3d87c3aa);
  box-shadow:0 0 0 0px #0b0b0b, 0 0 0 3px #2d2d2d, inset 0 0 0 rgba(255,255,255,.55);
  position: relative;
  aspect-ratio: 16/9;
  backdrop-filter:blur(6px);
}

.glossy-btn *{
  user-select:none;
}

.glossy-btn::before{
  content:"";
  position:absolute;
  inset: 6px;
  border-radius: 3px;
  pointer-events:none;
}

.glossy-btn::after{
  content:"";
  position:absolute;
  inset: 1px 0px -3px 0px;
  border-radius: 3px;
  background: radial-gradient(circle at 20% 10%,
    rgba(255,255,255,.55),
    rgba(255,255,255,.15) 45%,
    rgba(255,255,255,0) 70%);
  pointer-events:none;
}

.glossy-btn span{
  display:grid;
  place-items:center;
  height:100%;
  font: 700 58px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: #c11bd3;

  /* little “pop” like the image */
  text-shadow:
    0 2px 0 rgba(0,0,0,.25),
    0 0 6px rgba(140,0,170,.35);
}

/*.glossy-btn:active{
  transform: translateY(1px);
  box-shadow:
    0 0 0 3px #0b0b0b,
    0 0 0 5px #2d2d2d,
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 0 rgba(0,0,0,.35);
}*/

.glossy-btn:active{
  transform:scale(95%);
  transition:0.3s transform;
}