body { padding: 40px; background: #efefef; } .btn { background: #24abf2; color: #fff; padding: 15px; font-weight: 700; display: inline-block; font-size: 14px; text-decoration: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .lightbox { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .lightbox:target { display: flex; justify-content: center; align-items: center; } .lightbox__body { width: 400px; position: relative; } .lightbox__content { background: #fff; padding: 40px; border-radius: 2px; position: relative; p { margin: 0; font-size: 14px; line-height: 1.6em; color: #444; } } .lightbox__close-btn::after { content: "Close"; display: inline-block; position: absolute; right: -15px; top: -15px; z-index: 3; width: auto; height: 30px; cursor: pointer; background: #000; font-weight: 700; font-size: 11px; padding: 0 15px; line-height: 30px; color: #fff; } .lightbox__close-btn::before { content: ""; display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); }