* { padding: 0; margin: 0; } body { overflow: hidden; } .button-container { width: 100vw; height: 100vh; background-color: #ffffff; opacity: 100%; display: flex; align-items: center; justify-content: center; } button { padding: 20px; color: #ffffff; background-color: #0e79dd; border: none; border-radius: 5px; font-weight: 600; } .popup-modal { padding: 32px 64px; background-color: white; border: 1px solid black; border-radius: 10px; position: fixed; top: 50%; left: 50%; transform-origin: center; transform: translate(-50%, -50%); pointer-events: none; opacity: 0%; text-align: center; } .popup-modal p { margin-bottom: 24px } .backdrop { pointer-events: none; position: fixed; inset: 0; background: #000; opacity: 0%; } .popup-modal.show { opacity: 100%; pointer-events: all; } .backdrop.show { opacity: 30%; } /* SOLUTION */ .popup-modal { transition: transform .3s ease-in-out, opacity .4s ease; transform: translate(-50%, -100%); } .popup-modal.show { transform: translate(-50%, -50%); }