<main>
  <article>
    <h1>Pop-up Discount Code</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum nam sint sed modi dolor veniam repudiandae, et quasi unde quis voluptatum iure accusantium quam quod ducimus itaque eligendi eius, natus?</p>
    <button class="button ripple" popovertoggletarget="my-first-pop-up">Reveal Code</button>
    <div id="my-first-pop-up" popover>
      <div>Code: <code>my-first-pop-up</code></div>
    </div>

  </article>
</main>
@layer normalize, open-props, base, mdl, demo;

@layer demo {
  [popover] {
    padding: var(--size-4);
  }
  [popover] {
    --hide: 1;
    transition: transform 0.2s;
    box-shadow: var(--shadow-5);
    transform: translateY(calc(var(--hide) * -100vh))
      scale(calc(1 - var(--hide)));
  }

  [popover]::backdrop {
    background: hsl(0 0% 25% / 0.5);
    transition: opacity 0.2s;
    opacity: calc(1 - var(--hide, 1));
  }

  [popover]:open,
  [popover]:open::backdrop {
    --hide: 0;
  }
}

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

  body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    font-family: "Google Sans", sans-serif, system-ui;
    align-content: center;
    overflow: auto;
  }

  :where([popover]) {
    margin: auto;
    border-width: initial;
    border-style: solid;
  }
  code {
    background: var(--gray-2);
    color: var(--md-sys-color-primary);
    font-weight: var(--font-weight-9);
  }

  article {
    padding: var(--size-4);
    max-inline-size: var(--size-content-2);
  }

  article p {
    margin-bottom: var(--size-4);
  }
}

External CSS

  1. https://codepen.io/web-dot-dev/pen/XWqWYgB.css
  2. https://codepen.io/web-dot-dev/pen/ZExZWBQ.css

External JavaScript

  1. https://codepen.io/web-dot-dev/pen/XWqWYgB.js
  2. https://codepen.io/web-dot-dev/pen/ZExZWBQ.js