<h1>Click the button to open the popup</h1>
<button popovertarget="some-popup" popovertargetaction="toggle">Open the popup</button>
<div id="some-popup" aria-modal="true" popover="manual">
  <p>Hi, i'm a popover!</p>
  <button popovertarget="some-popup" popovertargetaction="hide" autofocus>close</button>
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed&display=swap');

button {
  display: block;
  padding:  10px 20px;
  font-family: 'Sofia Sans Extra Condensed', sans-serif;
  font-size: 2rem;
  letter-spacing: .05em;
  color: #FFF;
  background: #D36135;
  border: 3px solid #E6AA68;
  border-radius: 40px;
  cursor: pointer;
  transition: background-color .4s, border-color .4s;

button:is(:hover, :focus) {
  background: #9A401C;
  border-color: #BD8448;

[popover] {
  background: #ECE4B7;
  padding: 42px;
  border-radius: 20px;
  font-size: 3rem;

[popover]:popover-open {
  animation: pop-in .4s ease-out;

[popover]:popover-open::backdrop {
  animation: fade .4s ease-out;
  opacity: .5;
  background: #02020B;

*, *::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;

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: translateY(-80px);

@keyframes fade {
  0% {
    opacity: 0;
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.