<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Pop - Right?</title> <style> html, body { padding: 0; margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .container { display: flex; flex-direction: column; height: 20rem; } .action { position: relative; padding: 8.3rem 0; } .default-btn-container { display: grid; text-align: center; justify-content: center; } .default-btn { padding: 0.9rem 1.7rem; background-color: #ec4899; border: none; outline: none; border-radius: 4px; text-transform: uppercase; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; } .popOver { display: none; background-color: #db2777; padding: 15px 9px; gap: 15px; border-radius: 10px; width: 20rem; color: #fff; } .popOver-title { text-transform: uppercase; font-weight: 600; color: rgb(202, 197, 197); border-bottom: 1px solid rgb(163, 161, 161); padding-bottom: 1rem; } .show-popOver { display: grid; transition: display 0.1s ease-in-out; } .pop-right { position: absolute; right: -300px; top: 83px; } </style> </head> <body> <div class="container"> <div class="action"> <div class="default-btn-container"> <button class="default-btn" id="default-button">Right pink</button> </div> <div class="popOver" id="popOver"> <div class="popOver-title">Pink pop over title</div> <div> And here is some amazing content, it's very engaging. Right? </div> </div> </div> </div> <script async> const defaultButton = document.getElementById('default-button'); const popOver = document.getElementById('popOver'); defaultButton.onclick = () => { popOver.classList.toggle('show-popOver'); popOver.classList.add('pop-right'); }; </script> </body> </html>