Home Live Code Editor (HTML/CSS/JS) Daily Quotes August 05, 2025 Live Code Editor Live Code Editor Edit HTML, CSS, and JavaScript in real-time HTML CSS JavaScript HTML Clear × Collapse ▼ <!DOCTYPE html> <html> <head> <title>My Page</title> <style> body { font-family: Arial, sans-serif; text-align: center; padding: 40px; } h1 { color: #6c5ce7; margin-bottom: 20px; } p { color: #2d3436; font-size: 18px; margin-bottom: 30px; } .btn { background: linear-gradient(to right, #6c5ce7, #00b894); color: white; border: none; padding: 12px 24px; border-radius: 30px; cursor: pointer; font-size: 16px; transition: all 0.3s; box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3); } .btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4); } </style> </head> <body> <h1>Welcome to Live Editor</h1> <p>Edit the code on the left and see changes in real-time!</p> <button id="demo-btn" class="btn">Click Me</button> </body> </html> CSS Clear × Collapse ▼ /* Add your CSS styles here */ #demo-btn { transition: all 0.3s ease; } #demo-btn:active { transform: translateY(1px); } body { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; } JavaScript Clear × Collapse ▼ document.getElementById('demo-btn').addEventListener('click', function() { const colors = ['#6c5ce7', '#00b894', '#fd79a8', '#fdcb6e', '#0984e3']; const randomColor = colors[Math.floor(Math.random() * colors.length)]; // Animate button this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = 'scale(1)'; }, 100); // Change background document.body.style.background = `linear-gradient(135deg, ${randomColor} 0%, #f5f7fa 100%)`; // Show alert alert('Background color changed!'); }); Output Preview Run Code ▶ Facebook Twitter
