.button_style_1 {
  position: relative;
  overflow: visible;
  font-weight: 700;
  color: rgba(255,255,255,.98);
  text-transform: none;
  letter-spacing: .01em;
  padding: 1.05em 2em;

  /* liquid glass body */
  background:
    /* soft top gloss */
    radial-gradient(120% 95% at 50% -28%, rgba(255,255,255,.90), rgba(255,255,255,0) 62%),
    /* gentle blue tint */
    linear-gradient(180deg, rgba(128,160,255,.20), rgba(128,160,255,.07)),
    /* thickness gradient */
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.10)),
    rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;

  /* translucency */
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);

  /* depth (subtle, airy) */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 22px 46px -28px rgba(12,14,18,.55),
    0 10px 24px -18px rgba(12,14,18,.36);

  text-shadow: 0 1px 0 rgba(0,0,0,.10);

  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;

  -webkit-transition: background 160ms cubic-bezier(.2,.8,.2,1), -webkit-transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms cubic-bezier(.2,.8,.2,1), border-color 160ms;
  transition: background 160ms cubic-bezier(.2,.8,.2,1), -webkit-transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms cubic-bezier(.2,.8,.2,1), border-color 160ms;
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), background 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms cubic-bezier(.2,.8,.2,1), border-color 160ms, -webkit-transform 160ms cubic-bezier(.2,.8,.2,1);
}

.button_style_1::before {
  position: absolute;
  z-index: -1;
  content: "";
  width: 100%;
  height: 100%;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;

  /* rim highlight + faint chroma + foundation shadow */
  background:
    /* 1px inner ring (light top / darker bottom) */
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,0) 44%),
    linear-gradient(0deg, rgba(0,0,0,.28), rgba(0,0,0,0) 56%),
    /* delicate prismatic edge */
    conic-gradient(from 210deg, rgba(150,175,255,.18), rgba(255,155,230,.10), rgba(150,175,255,.18));
  background-blend-mode: screen, normal, screen;

  padding: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  /* contact shadow under glass (elliptical) */
  box-shadow:
    0 18px 40px -26px rgba(12,14,18,.62),
    0 8px 18px -14px rgba(12,14,18,.36);

  -webkit-transform: translate3d(0, .52em, -1em);
  transform: translate3d(0, .52em, -1em);

  -webkit-transition: box-shadow 160ms cubic-bezier(.2,.8,.2,1), -webkit-transform 160ms cubic-bezier(.2,.8,.2,1), opacity 160ms cubic-bezier(.2,.8,.2,1);
  transition: box-shadow 160ms cubic-bezier(.2,.8,.2,1), -webkit-transform 160ms cubic-bezier(.2,.8,.2,1), opacity 160ms cubic-bezier(.2,.8,.2,1);
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms cubic-bezier(.2,.8,.2,1), opacity 160ms cubic-bezier(.2,.8,.2,1), -webkit-transform 160ms cubic-bezier(.2,.8,.2,1);
}

.button_style_1::after {
  position: absolute;
  content: "";
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  /* specular gloss + frost micrograin + bottom caustic */
  background:
    radial-gradient(70% 45% at 50% -24%, rgba(255,255,255,.96), rgba(255,255,255,0) 62%),
    radial-gradient(180% 65% at 50% 120%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 2px);
  mix-blend-mode: screen;
  opacity: .94;

  -webkit-transition: opacity 160ms cubic-bezier(.2,.8,.2,1);
  transition: opacity 160ms cubic-bezier(.2,.8,.2,1);
}

.button_style_1:hover {
  background:
    radial-gradient(120% 95% at 50% -28%, rgba(255,255,255,.98), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(128,160,255,.24), rgba(128,160,255,.10)),
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.14)),
    rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.46);

  -webkit-transform: translate(0, -0.06em);
  transform: translate(0, -0.06em);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 28px 52px -30px rgba(12,14,18,.66),
    0 14px 30px -20px rgba(12,14,18,.40);
}

.button_style_1:hover::before {
  -webkit-transform: translate3d(0, .38em, -1em);
  transform: translate3d(0, .38em, -1em);
  box-shadow:
    0 22px 48px -30px rgba(12,14,18,.68),
    0 10px 22px -16px rgba(12,14,18,.40);
}

.button_style_1:hover::after {
  opacity: 1;
}

.button_style_1:active {
  background:
    radial-gradient(120% 95% at 50% -28%, rgba(255,255,255,.78), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(128,160,255,.16), rgba(128,160,255,.08)),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12)),
    rgba(255,255,255,.10);

  -webkit-transform: translate(0, .08em) scale(.995);
  transform: translate(0, .08em) scale(.995);

  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.30),
    inset 0 -1px 0 rgba(255,255,255,.16),
    0 16px 28px -22px rgba(12,14,18,.58);
}

.button_style_1:active::before {
  -webkit-transform: translate3d(0, .18em, -1em);
  transform: translate3d(0, .18em, -1em);
  box-shadow:
    0 12px 22px -18px rgba(12,14,18,.56),
    0 6px 14px -12px rgba(12,14,18,.36);
}