Elegant Alert - VexaX
Run Code
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Elegant Alert</title> <style> body { font-family: 'Georgia', serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #f0f4c3 0%, #dcedc8 100%); margin: 0; overflow: hidden; } .alert-wrapper { position: relative; display: inline-block; } .alert-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); padding: 35px; background: #ffffff; border-radius: 10px; box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5); text-align: center; animation: elegantScaleIn 0.5s forwards; transition: all 0.3s ease; color: #333333; } .alert-box.show { transform: translate(-50%, -50%) scale(1); } .alert-box h1 { font-size: 28px; margin: 0 0 10px; } .alert-box p { font-size: 18px; margin: 0 0 20px; } .alert-box .alert-icon { font-size: 60px; margin-bottom: 10px; } .alert-box .alert-emoji { font-size: 40px; margin-bottom: 20px; } .alert-box .alert-buttons { display: flex; justify-content: center; } .alert-box .alert-buttons button { border: none; padding: 12px 24px; margin: 0 10px; border-radius: 5px; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; } .alert-box .alert-buttons .confirm { background: #8bc34a; color: #ffffff; } .alert-box .alert-buttons .cancel { background: #f44336; color: #ffffff; } .alert-box .alert-buttons button:hover { transform: scale(1.1); } @keyframes elegantScaleIn { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } </style> </head> <body> <div class="alert-wrapper"> <div class="alert-box" id="alert-box"> <div class="alert-icon">💎</div> <h1>Elegant Alert!</h1> <p>This is an elegant-themed alert box.</p> <div class="alert-emoji">🌸</div> <div class="alert-buttons"> <button type="button" class="confirm">Confirm</button> <button type="button" class="cancel">Cancel</button> </div> </div> </div> <script> function showAlert() { document.querySelector('.alert-box').classList.add('show'); } document.addEventListener('DOMContentLoaded', () => { showAlert(); document.querySelector('.confirm').addEventListener('click', () => { alert('Confirmed!'); }); document.querySelector('.cancel').addEventListener('click', () => { document.getElementById("alert-box").style.display="none"; }); }); </script> </body> </html>