<body class="bg-dots">
  <button popovertarget="the-popover" class="btn">open popover</button>

  <dialog id="the-popover" popover class="text-lg card">
    🎉
  </dialog>
  
  <p class="text-sm">
    currently requires chrome for full effect
  </p>
</body>

:root {
  --color-prim: lch(50% 50% 192deg);
  --color-bg: lch(from var(--color-prim) calc(l + 40) calc(c * 0.25) h); 
  --color-sheet: lch(from var(--color-prim) 100% calc(c * 0.05) h); 
  --color-fg: lch(from var(--color-prim) 5% c h); 
  font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
}

html,
body {
  background: var(--color-bg);
  
  &:has(:popover-open) {
    --color-prim: lch(50% 50% 0deg);
  }
}

[popover], ::backdrop {
  transition: 
    display 400ms ease-in-out allow-discrete,
    transform 288ms ease-in-out,
    opacity 160ms ease-in-out;
}

[popover] {
  position: fixed;
  width: fit-content;
  height: fit-content;
  inset: 0px;
  padding: 0.25em;
  opacity: 0;
  transform: perspective(800px) translateY(200px) scale(0.8)  rotate3d(1, 1, 0, 180deg);

  &::backdrop {
    background-color: var(--color-fg);
    opacity: 0;
  }
  
  &:popover-open {
    opacity: 1;
    transform: translateY(0) scale(1) ;
    
    &::backdrop {
      opacity: 0.5;
    }
  }

  @starting-style {
    &:popover-open {
      opacity: 0;
      transform: perspective(800px) translateY(-80px) scale(2) rotate3d(2, 0, 8, 45deg);
    }
    
    &:popover-open::backdrop {
      opacity: 0;
    }
  }
}

/** just styling **/

html,
body {
  display: grid;
  place-content: center;
  gap: 2rem;
  height: 100%;
}

.text-lg {
  font-size: 4rem;
}

.card {
  border-radius: 1rem;
  padding: 3rem;
  box-shadow:  4px 4px 8px lch(from var(--color-bg) calc(l - 90) c h / 20%);
}

.btn {
  border: 0.25rem solid var(--color-fg);
  border-radius: 1rem;
  font-size: 2rem;
  padding: 0.33rem 0.75rem;
  box-shadow:  2px 4px 0 var(--color-fg),
    2px 6px 8px lch(from var(--color-bg) calc(l - 90) c h / 50%);
  background-color: var(--color-sheet);
  transition: 200ms ease-in-out;
  cursor: pointer;
  color: var(--color-fg);

  &:focus,
  &:hover {
    background-color: white;
    box-shadow:  0px 0px 0 black;
    transform: translate(4px, 4px);
  }
}

.text-sm {
  font-size: 0.8rem;
  text-align: center;
  color: oklch(from var(--color-bg) 50% c h);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.