<dialog>
  <div>Rad! <span>🤙</span></div>
  <button class="close">Close Dialog</button>
</dialog>
<button class="open">Open Dialog</button>

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  background: var(--gradient-1);
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: "Google Sans", sans-serif, system-ui;
}

dialog {
  font-size: var(--font-size-fluid-2);
  font-weight: var(--font-weight-6);
  transition: transform var(--ease-elastic-4);
  transform: translateY(calc(var(--hide, 1) * 100vmin));
}

dialog span {
  animation: wiggle 3s infinite;
  display: inline-block;
  transform-origin: 65%;
}

dialog[open] {
  --hide: 0;
}

dialog::backdrop {
  background: hsl(0 0% 10% / 0.5);
  backdrop-filter: blur(2px);
}

button {
  transform: translateX(var(--x, 0)) scale(var(--scale, 1));
  padding: var(--size-2) var(--size-4);
  background: hsl(210 60% var(--lightness, 30%));
  transition: background 0.25s, transform 0.25s;
  color: var(--gray-0);
  font-size: var(--font-size-1);
}

button.open {
  --x: -50%;
  position: fixed;
  bottom: 10vmin;
  left: 50%;
}

button:hover {
  --scale: 1.1;
  --lightness: 40%;
}

button:active {
  --scale: 0.9;
  --lightness: 20%;
}

@keyframes wiggle {
  0%,
  10%,
  20%,
  30%,
  40% {
    transform: rotateY(180deg) rotate(-8deg);
  }
  5%,
  15%,
  25%,
  35%,
  45% {
    transform: rotateY(180deg) rotate(8deg);
  }
  50%,
  100% {
    transform: rotateY(180deg) rotate(0);
  }
}

const OPEN_BUTTON = document.querySelector("button.open");
const CLOSE_BUTTON = document.querySelector("button.close");
const DIALOG = document.querySelector("dialog");

const OPEN_DIALOG = () => {
  DIALOG.showModal();
};
const CLOSE_DIALOG = () => {
  DIALOG.close();
};

OPEN_BUTTON.addEventListener("click", OPEN_DIALOG);
CLOSE_BUTTON.addEventListener("click", CLOSE_DIALOG);