body{ background: #edeef6; min-height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; } button{ background: #DAA520; color: #fff; border: 1px solid #DAA520; border-radius: 5px; outline: none; padding: 15px 25px; cursor: pointer; font-size: 16px; transition: .3s; } button:hover{ background: #fff; color: #DAA520; } .container{ display: flex; align-items: center; justify-content: center; background-color:rgba(0,0,0, .3); position: fixed; opacity: 0; pointer-events: none; top:0; left: 0; height: 100vh; width: 100%; transition: .3s; } .container.show{ pointer-events: auto; opacity: 1; } .modal{ background: #fff; border-radius: 5px; padding: 25px; width: 300px; max-width: 100%; text-align: center; } .modal h1{ margin: 0; } .modal p{ font-size: 14px; opacity: .7; }