<h1>Click the button to open the popup</h1>
<button popovertarget="some-popup" popovertargetaction="toggle">Open the popup</button>
<dialog id="some-popup" aria-modal="true" popover>
  <p>Hi, i'm a popover!</p>
  <button popovertarget="some-popup" popovertargetaction="hide" autofocus>close</button>
</dialog>

@import url("https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed&display=swap");

:root {
  --transition-time: 0.8s;
}

button {
  display: block;
  padding: 10px 20px;
  font-family: "Sofia Sans Extra Condensed", sans-serif;
  font-size: 2rem;
  letter-spacing: 0.05em;
  color: #fff;
  background: #d36135;
  border: 3px solid #e6aa68;
  border-radius: 40px;
  cursor: pointer;
  transition: background-color 0.4s, border-color 0.4s;
}

button:is(:hover, :focus) {
  background: #9a401c;
  border-color: #bd8448;
}

[popover] {
  opacity: 0;
  display: none;
  background: #ece4b7;
  padding: 42px;
  border-radius: 20px;
  font-size: 3rem;
  transform: translateY(-30px);
  transition: display var(--transition-time), opacity var(--transition-time),
    transform var(--transition-time) ease-out;
}

@initial {
  [popover] {
    opacity: 0;
    transform: translateY(-30px);
  }
}

[popover]:popover-open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

[popover]::backdrop {
  opacity: 0;
}

[popover]:popover-open::backdrop {
  opacity: 0.5;
  background: #02020b;
}

/* demo styles */

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

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: "Sofia Sans Extra Condensed", sans-serif;
  color: #02020b;
  background: #7fb069;
}

h1 {
  font-size: 3rem;
  margin-bottom: 100px;
}