Animated buttons can significantly enhance the user experience by adding a touch of interactivity and visual appeal. They are a simple yet effective way to make your website more engaging.
In this article, we will explore 10 animated button examples that can elevate your UI design. Each example showcases unique animations that can be easily integrated into your projects.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers, elevate your UI game with Subframe's drag-and-drop interface. Its intuitive, responsive canvas ensures pixel-perfect designs every time, making it a favorite among professionals.
Ready to create stunning animated buttons effortlessly? Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Unlock the power of Subframe to design pixel-perfect UIs with ease. Whether you're crafting animated buttons or entire interfaces, Subframe's drag-and-drop editor ensures efficiency and precision.
Don't wait—start creating stunning designs immediately. Start for free today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f8f9fa; } .checkout-container { width: 100%; max-width: 600px; background-color: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); padding: 30px; position: relative; overflow: hidden; } .checkout-header { margin-bottom: 25px; } .checkout-header h2 { font-size: 24px; color: #333; margin-bottom: 8px; font-weight: 600; } .checkout-header p { color: #666; font-size: 14px; } .cart-summary { margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .cart-item { display: flex; align-items: center; margin-bottom: 15px; } .item-image { width: 60px; height: 60px; background-color: #f0f0f0; border-radius: 8px; overflow: hidden; margin-right: 15px; } .item-image img { width: 100%; height: 100%; object-fit: cover; } .item-details { flex-grow: 1; } .item-name { font-weight: 500; margin-bottom: 3px; color: #333; } .item-price { color: #555; font-size: 14px; } .price-summary { margin-bottom: 25px; } .price-row { display: flex; justify-content: space-between; margin-bottom: 8px; color: #555; font-size: 14px; } .price-row.total { font-weight: 600; color: #333; font-size: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #eee; } .checkout-button { position: relative; display: block; width: 100%; padding: 16px; border: none; border-radius: 8px; background: linear-gradient(135deg, #4285f4, #34a853); background-size: 200% 200%; color: white; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; overflow: hidden; text-align: center; box-shadow: 0 4px 15px rgba(66, 133, 244, 0.2); animation: gradientShift 5s infinite alternate; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .checkout-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(66, 133, 244, 0.3); animation: pulse 1.5s infinite, gradientShift 5s infinite alternate; } @keyframes pulse { 0% { box-shadow: 0 4px 15px rgba(66, 133, 244, 0.2); } 50% { box-shadow: 0 4px 25px rgba(66, 133, 244, 0.4); } 100% { box-shadow: 0 4px 15px rgba(66, 133, 244, 0.2); } } .checkout-button:active { animation: click 0.3s forwards; } @keyframes click { 0% { transform: scale(1); } 50% { transform: scale(0.97); } 100% { transform: scale(1); } } .checkout-button .button-text { position: relative; z-index: 2; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .checkout-button .icon { display: inline-block; margin-left: 10px; transition: transform 0.3s ease; } .checkout-button:hover .icon { transform: translateX(5px); } .checkout-button .progress-overlay { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: linear-gradient(135deg, #34a853, #1e8e3e); background-size: 200% 200%; transition: width 0.5s ease-in-out; z-index: 1; opacity: 0.7; border-radius: 8px; } .complete-icon { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; } .complete-circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: white; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; } .complete-path { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; stroke: white; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.3s forwards; } @keyframes stroke { 100% { stroke-dashoffset: 0; } } .security-badge { display: flex; align-items: center; justify-content: center; margin-top: 20px; color: #777; font-size: 13px; } .security-badge svg { margin-right: 8px; } /* Ripple effect */ .checkout-button .ripple { position: absolute; background-color: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: scale(0); animation: ripple 0.6s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(4); opacity: 0; } } /* Responsive adjustments */ @media (max-width: 480px) { .checkout-container { padding: 20px; max-width: 95%; } .checkout-header h2 { font-size: 20px; } .item-image { width: 50px; height: 50px; } .checkout-button { padding: 14px; } } </style> </head> <body> <div class="checkout-container"> <div class="checkout-header"> <h2>Complete Your Purchase</h2> <p>Review your items and complete payment</p> </div> <div class="cart-summary"> <div class="cart-item"> <div class="item-image"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%23f0f0f0'/%3E%3Cpath d='M20 20h26v26H20z' fill='%23ddd'/%3E%3Cpath d='M36 34a6 6 0 11-12 0 6 6 0 0112 0z' fill='%23ccc'/%3E%3C/svg%3E" alt="Premium Headphones"> </div> <div class="item-details"> <div class="item-name">Premium Wireless Headphones</div> <div class="item-price">$149.99</div> </div> </div> <div class="cart-item"> <div class="item-image"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%23f0f0f0'/%3E%3Cpath d='M15 15h30v30H15z' fill='%23ddd'/%3E%3Cpath d='M32 25h8v10h-8zM20 25h8v10h-8z' fill='%23ccc'/%3E%3C/svg%3E" alt="Smart Speaker"> </div> <div class="item-details"> <div class="item-name">Smart Home Speaker</div> <div class="item-price">$89.99</div> </div> </div> </div> <div class="price-summary"> <div class="price-row"> <span>Subtotal</span> <span>$239.98</span> </div> <div class="price-row"> <span>Shipping</span> <span>Free</span> </div> <div class="price-row"> <span>Estimated Tax</span> <span>$19.20</span> </div> <div class="price-row total"> <span>Total</span> <span>$259.18</span> </div> </div> <button class="checkout-button" id="checkoutBtn"> <span class="button-text">Securely Checkout <span class="icon">→</span></span> <div class="progress-overlay"></div> <svg class="complete-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 52 52"> <circle class="complete-circle" cx="26" cy="26" r="25"/> <path class="complete-path" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/> </svg> </button> <div class="security-badge"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/> </svg> Secure, encrypted checkout powered by SSL </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const checkoutBtn = document.getElementById('checkoutBtn'); const buttonText = checkoutBtn.querySelector('.button-text'); const progressOverlay = checkoutBtn.querySelector('.progress-overlay'); const completeIcon = checkoutBtn.querySelector('.complete-icon'); // Add ripple effect checkoutBtn.addEventListener('click', function(e) { const x = e.clientX - e.target.getBoundingClientRect().left; const y = e.clientY - e.target.getBoundingClientRect().top; const ripple = document.createElement('span'); ripple.classList.add('ripple'); ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); // Simulate checkout process simulateCheckout(); }); function simulateCheckout() { // First step - Start progress buttonText.textContent = "Processing..."; buttonText.style.opacity = "0.8"; let progress = 0; const progressInterval = setInterval(() => { progress += 5; progressOverlay.style.width = `${progress}%`; if (progress >= 100) { clearInterval(progressInterval); completeCheckout(); } }, 100); } function completeCheckout() { // Complete animation buttonText.style.opacity = "0"; setTimeout(() => { completeIcon.style.display = "block"; setTimeout(() => { // Reset button after 2 seconds completeIcon.style.display = "none"; progressOverlay.style.width = "0"; buttonText.innerHTML = 'Securely Checkout <span class="icon">→</span>'; buttonText.style.opacity = "1"; }, 2000); }, 300); } // Advanced hover interaction for button checkoutBtn.addEventListener('mousemove', function(e) { const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; // Calculate position as percentage const posX = x / rect.width; const posY = y / rect.height; // Apply subtle gradient shift based on mouse position this.style.backgroundPosition = `${posX * 100}% ${posY * 100}%`; }); checkoutBtn.addEventListener('mouseleave', function() { // Reset gradient animation this.style.backgroundPosition = ''; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Healthcare Appointment Button</title> <style> :root { --primary: #5BB5C8; --primary-light: #7ECDDE; --secondary: #A0C3D9; --accent: #F9C4D6; --light: #F9F6EE; --dark: #2E4057; --success: #78D9B7; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--light); padding: 20px; } .app-container { width: 100%; max-width: 600px; background-color: white; border-radius: 24px; box-shadow: 0 10px 30px rgba(46, 64, 87, 0.1); padding: 30px; text-align: center; position: relative; overflow: hidden; } h1 { color: var(--dark); margin-bottom: 20px; font-weight: 600; font-size: 28px; } p { color: var(--dark); opacity: 0.8; line-height: 1.6; margin-bottom: 30px; font-size: 16px; } .appointment-options { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; margin-bottom: 30px; } .time-option { padding: 12px 20px; background-color: #f0f5fa; border-radius: 12px; color: var(--dark); font-weight: 500; cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; } .time-option:hover { background-color: #e6f0f7; } .time-option.selected { background-color: var(--secondary); border-color: var(--primary); color: var(--dark); } .appointment-btn { position: relative; padding: 15px 28px; background-color: var(--primary); color: white; border: none; border-radius: 50px; font-size: 16px; font-weight: 600; cursor: pointer; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(91, 181, 200, 0.3); display: inline-flex; align-items: center; justify-content: center; gap: 10px; transform: translateZ(0); outline: none; } .appointment-btn:before { content: ''; position: absolute; top: -10%; left: -10%; width: 120%; height: 120%; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: 1; } .appointment-btn:hover { background-color: var(--primary-light); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(91, 181, 200, 0.4); } .appointment-btn:hover:before { opacity: 0.5; animation: pulse 1.5s infinite; } .appointment-btn:active { transform: translateY(1px); box-shadow: 0 2px 10px rgba(91, 181, 200, 0.3); } .btn-icon { display: inline-block; width: 20px; height: 20px; position: relative; } .success-state { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: var(--success); border-radius: 50px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.5); transition: all 0.3s ease; pointer-events: none; } .success-state.active { opacity: 1; transform: scale(1); } .success-icon { width: 60px; height: 60px; stroke: white; stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; } .success-state.active .success-icon { animation: draw 0.5s ease forwards 0.3s; } .calendar-pattern { position: absolute; top: 20px; right: 20px; width: 60px; height: 60px; opacity: 0.1; z-index: 0; } .pulse-dot { position: absolute; width: 10px; height: 10px; background-color: var(--accent); border-radius: 50%; bottom: 20px; left: 30px; } .pulse-dot:before { content: ''; position: absolute; width: 100%; height: 100%; background-color: var(--accent); border-radius: 50%; animation: pulse 2s infinite; opacity: 0.6; } .status-message { margin-top: 20px; font-weight: 500; color: var(--success); opacity: 0; transition: opacity 0.5s ease; height: 24px; } .status-message.active { opacity: 1; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(2.5); opacity: 0; } 100% { transform: scale(1); opacity: 0; } } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fadeInUp { animation: fadeInUp 0.6s ease forwards; } .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } @media (max-width: 500px) { .app-container { padding: 20px; border-radius: 16px; } h1 { font-size: 24px; } p { font-size: 14px; margin-bottom: 20px; } .appointment-options { gap: 10px; } .time-option { padding: 10px 15px; font-size: 14px; } } </style> </head> <body> <div class="app-container"> <div class="calendar-pattern"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="3" y="6" width="18" height="15" rx="2" stroke="currentColor" stroke-width="2"/> <path d="M3 10H21" stroke="currentColor" stroke-width="2"/> <path d="M8 3V7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> <path d="M16 3V7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> <rect x="6" y="14" width="3" height="3" rx="0.5" fill="currentColor"/> <rect x="11" y="14" width="3" height="3" rx="0.5" fill="currentColor"/> </svg> </div> <div class="pulse-dot"></div> <h1 class="fadeInUp">Schedule Your Telehealth Visit</h1> <p class="fadeInUp delay-1">Choose an available time slot for your virtual appointment with Dr. Sarah Chen, Cardiologist. All appointments include a pre-visit questionnaire.</p> <div class="appointment-options fadeInUp delay-2"> <div class="time-option" data-time="9:00 AM">9:00 AM</div> <div class="time-option" data-time="10:30 AM">10:30 AM</div> <div class="time-option" data-time="1:15 PM">1:15 PM</div> <div class="time-option" data-time="3:45 PM">3:45 PM</div> <div class="time-option" data-time="5:00 PM">5:00 PM</div> </div> <button class="appointment-btn fadeInUp delay-3" id="bookAppointment" disabled> <span class="btn-text">Select a time slot</span> <span class="btn-icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> <path d="M12 5L19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> <div class="success-state"> <svg class="success-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 12L10 17L19 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </button> <div class="status-message" id="statusMessage"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const timeOptions = document.querySelectorAll('.time-option'); const bookButton = document.getElementById('bookAppointment'); const btnText = bookButton.querySelector('.btn-text'); const successState = document.querySelector('.success-state'); const statusMessage = document.getElementById('statusMessage'); let selectedTime = null; timeOptions.forEach(option => { option.addEventListener('click', function() { // Clear previous selection timeOptions.forEach(opt => opt.classList.remove('selected')); // Set new selection this.classList.add('selected'); selectedTime = this.dataset.time; // Update button bookButton.disabled = false; btnText.textContent = `Book for ${selectedTime}`; }); }); bookButton.addEventListener('click', function(e) { if (this.disabled) return; // Prevent multiple clicks this.disabled = true; // Start animation successState.classList.add('active'); // Show confirmation message after a delay setTimeout(() => { statusMessage.textContent = `Appointment confirmed for ${selectedTime} with Dr. Chen`; statusMessage.classList.add('active'); }, 800); // Reset to initial state after 4 seconds for demo purposes setTimeout(() => { successState.classList.remove('active'); statusMessage.classList.remove('active'); // Reset selection timeOptions.forEach(opt => opt.classList.remove('selected')); this.disabled = true; btnText.textContent = 'Select a time slot'; // Clear status message after fade out setTimeout(() => { statusMessage.textContent = ''; }, 500); }, 4000); }); // Add subtle hover effect to the container const container = document.querySelector('.app-container'); container.addEventListener('mousemove', function(e) { const boundingRect = this.getBoundingClientRect(); const x = e.clientX - boundingRect.left; const y = e.clientY - boundingRect.top; const centerX = boundingRect.width / 2; const centerY = boundingRect.height / 2; const moveX = (x - centerX) / 40; const moveY = (y - centerY) / 40; this.style.transform = `perspective(1000px) rotateX(${-moveY}deg) rotateY(${moveX}deg) scale(1.01)`; }); container.addEventListener('mouseleave', function() { this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)'; }); }); </script> </body> </html>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Orbitron', sans-serif; user-select: none; } @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800&display=swap'); body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: #0a0a14; background-image: radial-gradient(circle at 20% 30%, rgba(37, 11, 120, 0.15) 0%, transparent 40%), radial-gradient(circle at 80% 20%, rgba(12, 99, 157, 0.15) 0%, transparent 40%), radial-gradient(circle at 50% 70%, rgba(41, 14, 151, 0.15) 0%, transparent 50%); overflow: hidden; } .portal-container { position: relative; width: 100%; max-width: 700px; height: 100%; max-height: 700px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; } .portal-header { color: #fff; text-align: center; margin-bottom: 2rem; position: relative; z-index: 1; } .portal-header h1 { font-size: 3.5rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1rem; text-shadow: 0 0 15px rgba(79, 220, 255, 0.7); color: transparent; background: linear-gradient(90deg, #4FDCFF, #B721FF); -webkit-background-clip: text; background-clip: text; } .portal-header p { font-size: 1.2rem; color: #8d8daa; max-width: 80%; margin: 0 auto; } .start-button-container { position: relative; margin-top: 1rem; z-index: 2; } .start-button { position: relative; padding: 1.2rem 3.5rem; font-size: 1.5rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #fff; background: rgba(20, 20, 35, 0.7); border: 2px solid #4FDCFF; border-radius: 12px; cursor: pointer; overflow: hidden; outline: none; transition: all 0.3s ease; box-shadow: 0 0 10px rgba(79, 220, 255, 0.5), 0 0 30px rgba(79, 220, 255, 0.2); } .start-button::before { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; background: linear-gradient(45deg, #4FDCFF, #B721FF, #4FDCFF); z-index: -1; border-radius: 14px; animation: edge-glow 3s linear infinite; } .start-button::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: 0.5s; } .start-button:hover { transform: scale(1.05); text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); box-shadow: 0 0 20px rgba(79, 220, 255, 0.7), 0 0 40px rgba(79, 220, 255, 0.4); } .start-button:active { transform: scale(0.95); } .start-button:hover::after { left: 100%; } .button-text span { display: inline-block; transform: translateY(0); transition: transform 0.2s ease; } .button-text:hover span { animation: wave 0.3s ease forwards; } .particle-container { position: absolute; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .particle { position: absolute; width: 4px; height: 4px; background: #4FDCFF; border-radius: 50%; opacity: 0; } .grid-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(79, 220, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 220, 255, 0.1) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.3; z-index: 0; animation: grid-pulse 4s ease-in-out infinite; pointer-events: none; } .portal-ring { position: absolute; border-radius: 50%; border: 2px solid rgba(79, 220, 255, 0.2); opacity: 0; z-index: 0; pointer-events: none; } .hover-indicator { position: absolute; top: 70%; left: 50%; transform: translateX(-50%); color: #4FDCFF; font-size: 0.9rem; opacity: 0.7; letter-spacing: 1px; animation: pulse 2s ease-in-out infinite; } @keyframes edge-glow { 0% { opacity: 0.8; } 50% { opacity: 0.4; } 100% { opacity: 0.8; } } @keyframes wave { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } @keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } } @keyframes grid-pulse { 0% { opacity: 0.2; } 50% { opacity: 0.4; } 100% { opacity: 0.2; } } @media (max-width: 700px) { .portal-header h1 { font-size: 2.5rem; } .portal-header p { font-size: 1rem; } .start-button { padding: 1rem 2.5rem; font-size: 1.2rem; } } @media (max-height: 700px) { .portal-header { margin-bottom: 1rem; } .portal-header h1 { font-size: 2.2rem; margin-bottom: 0.5rem; } .portal-header p { font-size: 0.9rem; } } </style> </head> <body> <div class="portal-container"> <div class="grid-overlay"></div> <div class="particle-container"></div> <div class="portal-header"> <h1>NEXUS ENGINE</h1> <p>Access your universe of high-stakes gameplay with unparalleled frame rates and zero lag</p> </div> <div class="start-button-container"> <button class="start-button"> <div class="button-text">INITIATE</div> </button> <div class="hover-indicator">TAP TO ENGAGE</div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const startButton = document.querySelector('.start-button'); const buttonText = document.querySelector('.button-text'); const particleContainer = document.querySelector('.particle-container'); const portalContainer = document.querySelector('.portal-container'); // Create character spans for wave animation const text = buttonText.textContent; buttonText.textContent = ''; [...text].forEach((char, index) => { const span = document.createElement('span'); span.textContent = char; span.style.animationDelay = `${index * 0.05}s`; buttonText.appendChild(span); }); // Function to create particles function createParticles(x, y) { const particleCount = 15; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); // Random position around the button const offsetX = (Math.random() - 0.5) * 100; const offsetY = (Math.random() - 0.5) * 100; particle.style.left = `${x + offsetX}px`; particle.style.top = `${y + offsetY}px`; // Random size const size = Math.random() * 5 + 2; particle.style.width = `${size}px`; particle.style.height = `${size}px`; // Random color const colors = ['#4FDCFF', '#B721FF', '#FFFFFF']; particle.style.background = colors[Math.floor(Math.random() * colors.length)]; // Animation const angle = Math.random() * Math.PI * 2; const speed = Math.random() * 100 + 50; const translateX = Math.cos(angle) * speed; const translateY = Math.sin(angle) * speed; particle.animate([ { transform: 'translate(0, 0)', opacity: 1 }, { transform: `translate(${translateX}px, ${translateY}px)`, opacity: 0 } ], { duration: Math.random() * 1000 + 500, easing: 'cubic-bezier(0.1, 0.8, 0.2, 1)' }); particleContainer.appendChild(particle); // Remove particle after animation setTimeout(() => { particle.remove(); }, 1500); } } // Function to create portal rings function createPortalRings() { const buttonRect = startButton.getBoundingClientRect(); const centerX = buttonRect.left + buttonRect.width / 2; const centerY = buttonRect.top + buttonRect.height / 2; for (let i = 0; i < 3; i++) { const ring = document.createElement('div'); ring.classList.add('portal-ring'); // Set initial position and size const initialSize = Math.max(buttonRect.width, buttonRect.height) + 20; ring.style.width = `${initialSize}px`; ring.style.height = `${initialSize}px`; ring.style.left = `${centerX - initialSize / 2}px`; ring.style.top = `${centerY - initialSize / 2}px`; document.body.appendChild(ring); // Animate the ring ring.animate([ { transform: 'scale(1)', opacity: 0.8 }, { transform: 'scale(3)', opacity: 0 } ], { duration: 1000 + i * 300, easing: 'ease-out' }); // Remove ring after animation setTimeout(() => { ring.remove(); }, 1000 + i * 300); } } // Button hover effects startButton.addEventListener('mouseenter', () => { startButton.style.boxShadow = '0 0 20px rgba(79, 220, 255, 0.7), 0 0 40px rgba(79, 220, 255, 0.4)'; document.querySelector('.hover-indicator').style.opacity = '0'; }); startButton.addEventListener('mouseleave', () => { startButton.style.boxShadow = '0 0 10px rgba(79, 220, 255, 0.5), 0 0 30px rgba(79, 220, 255, 0.2)'; document.querySelector('.hover-indicator').style.opacity = '0.7'; }); // Button click effect startButton.addEventListener('click', (e) => { // Create visual effects const rect = startButton.getBoundingClientRect(); const x = rect.left + rect.width / 2; const y = rect.top + rect.height / 2; createParticles(x, y); createPortalRings(); // Button scale animation startButton.animate([ { transform: 'scale(1)' }, { transform: 'scale(0.95)' }, { transform: 'scale(1.1)' }, { transform: 'scale(1)' } ], { duration: 600, easing: 'cubic-bezier(0.2, 0.8, 0.2, 1)' }); // Flash effect on the button const flash = document.createElement('div'); flash.style.position = 'absolute'; flash.style.top = '0'; flash.style.left = '0'; flash.style.right = '0'; flash.style.bottom = '0'; flash.style.backgroundColor = 'rgba(255, 255, 255, 0.8)'; flash.style.borderRadius = '12px'; flash.style.zIndex = '1'; startButton.style.overflow = 'hidden'; startButton.appendChild(flash); flash.animate([ { opacity: 0.8 }, { opacity: 0 } ], { duration: 300, easing: 'ease-out' }); setTimeout(() => { flash.remove(); }, 300); // Change button text temporarily const originalText = buttonText.innerHTML; buttonText.innerHTML = 'LOADING...'; setTimeout(() => { buttonText.innerHTML = originalText; // Recreate character spans for wave animation const spans = buttonText.querySelectorAll('span'); spans.forEach((span, index) => { span.style.animationDelay = `${index * 0.05}s`; }); }, 1500); // Screen flash effect const screenFlash = document.createElement('div'); screenFlash.style.position = 'fixed'; screenFlash.style.top = '0'; screenFlash.style.left = '0'; screenFlash.style.width = '100%'; screenFlash.style.height = '100%'; screenFlash.style.backgroundColor = 'rgba(79, 220, 255, 0.2)'; screenFlash.style.zIndex = '10'; screenFlash.style.pointerEvents = 'none'; document.body.appendChild(screenFlash); screenFlash.animate([ { opacity: 0.2 }, { opacity: 0 } ], { duration: 500, easing: 'ease-out' }); setTimeout(() => { screenFlash.remove(); }, 500); }); // Add ambient particles function createAmbientParticle() { if (document.hidden) return; const particle = document.createElement('div'); particle.classList.add('particle'); // Position at a random edge of the container const side = Math.floor(Math.random() * 4); const containerRect = portalContainer.getBoundingClientRect(); let x, y; switch (side) { case 0: // Top x = Math.random() * containerRect.width; y = 0; break; case 1: // Right x = containerRect.width; y = Math.random() * containerRect.height; break; case 2: // Bottom x = Math.random() * containerRect.width; y = containerRect.height; break; case 3: // Left x = 0; y = Math.random() * containerRect.height; break; } particle.style.left = `${x}px`; particle.style.top = `${y}px`; // Size and color const size = Math.random() * 3 + 1; particle.style.width = `${size}px`; particle.style.height = `${size}px`; const colors = ['rgba(79, 220, 255, 0.7)', 'rgba(183, 33, 255, 0.7)', 'rgba(255, 255, 255, 0.7)']; particle.style.background = colors[Math.floor(Math.random() * colors.length)]; // Animation const targetX = containerRect.width / 2 + (Math.random() - 0.5) * 100; const targetY = containerRect.height / 2 + (Math.random() - 0.5) * 100; const startX = parseInt(particle.style.left); const startY = parseInt(particle.style.top); particle.animate([ { transform: 'translate(0, 0)', opacity: 0 }, { transform: 'translate(0, 0)', opacity: 0.8, offset: 0.1 }, { transform: `translate(${targetX - startX}px, ${targetY - startY}px)`, opacity: 0 } ], { duration: Math.random() * 3000 + 2000, easing: 'cubic-bezier(0.1, 0.8, 0.2, 1)' }); particleContainer.appendChild(particle); // Remove particle after animation setTimeout(() => { if (particle.parentNode) { particle.remove(); } }, 5000); } // Create ambient particles periodically setInterval(createAmbientParticle, 300); // Initialize with some particles for (let i = 0; i < 10; i++) { setTimeout(createAmbientParticle, i * 100); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mobile App Primary Action Button</title> <style> :root { --primary-color: #4a6cff; --secondary-color: #5e7dff; --success-color: #16c79a; --background-color: #f7f9fc; --shadow-color: rgba(74, 108, 255, 0.3); --text-color: #384053; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: var(--background-color); padding: 20px; color: var(--text-color); } .phone-mockup { width: 300px; height: 600px; background: white; border-radius: 30px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; border: 8px solid #333; transition: transform 0.3s ease; } .phone-screen { width: 100%; height: 100%; position: relative; background: linear-gradient(145deg, #f7f9fc, #e8f0fe); display: flex; flex-direction: column; justify-content: space-between; padding: 30px 20px; } .phone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 20px; background-color: #333; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .app-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; } .app-title { font-size: 24px; font-weight: 700; color: var(--text-color); } .app-settings { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .app-content { text-align: center; padding: 20px 0; } .action-description { margin-bottom: 20px; font-size: 16px; line-height: 1.5; color: var(--text-color); } .button-container { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 10px 0 30px; } .action-button { position: relative; background-color: var(--primary-color); color: white; border: none; border-radius: 24px; height: 56px; width: 200px; font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 16px var(--shadow-color); cursor: pointer; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); outline: none; overflow: hidden; } .action-button:hover { transform: translateY(-4px); box-shadow: 0 12px 24px var(--shadow-color); } .action-button:active { transform: scale(0.96); background-color: var(--secondary-color); box-shadow: 0 4px 8px var(--shadow-color); } .button-icon { margin-right: 12px; display: flex; } .button-text { position: relative; z-index: 1; } .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); transform: scale(0); animation: ripple 0.6s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(4); opacity: 0; } } .progress-indicator { position: absolute; top: 0; left: 0; height: 100%; width: 0; background-color: rgba(255, 255, 255, 0.2); transition: width 0.3s ease; z-index: 0; } .custom-actions { display: flex; justify-content: space-around; width: 100%; margin-top: 40px; } .custom-button { background-color: transparent; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; transition: transform 0.2s ease; } .custom-button:hover { transform: translateY(-2px); } .button-icon-container { width: 40px; height: 40px; background-color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); margin-bottom: 8px; } .button-label { font-size: 12px; color: var(--text-color); } .context-description { background-color: rgba(255, 255, 255, 0.7); border-radius: 16px; padding: 16px; margin-top: 20px; } .success-message { color: var(--success-color); font-weight: 600; margin-top: 16px; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; } .success-message.active { opacity: 1; transform: translateY(0); } .button-state-examples { display: flex; justify-content: space-between; margin-top: 40px; width: 100%; } .state-example { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--text-color); } .state-button { width: 60px; height: 36px; border-radius: 18px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 10px; } .state-default { background-color: var(--primary-color); box-shadow: 0 4px 8px var(--shadow-color); } .state-hover { background-color: var(--secondary-color); box-shadow: 0 6px 12px var(--shadow-color); } .state-active { background-color: var(--primary-color); box-shadow: 0 2px 4px var(--shadow-color); transform: scale(0.96); } .state-loading { background-color: var(--primary-color); overflow: hidden; position: relative; } .loading-animation { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); animation: loading 1.5s infinite; } @keyframes loading { 0% { left: -100%; } 100% { left: 100%; } } @media (max-width: 700px) { .phone-mockup { transform: scale(0.9); } } @media (max-width: 400px) { .phone-mockup { transform: scale(0.8); } } </style> </head> <body> <div class="phone-mockup"> <div class="phone-notch"></div> <div class="phone-screen"> <div class="app-header"> <div class="app-title">TapTask</div> <div class="app-settings"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="#384053" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z" stroke="#384053" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <div class="app-content"> <div class="action-description"> <h3>Primary Action Button</h3> <p>Tap below to see the button's micro-interactions in action.</p> </div> <div class="button-container"> <button id="actionButton" class="action-button"> <div class="button-icon"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 5V19M5 12H19" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span class="button-text">Add to Cart</span> <div class="progress-indicator"></div> </button> <p class="success-message" id="successMessage">✓ Item added successfully!</p> </div> <div class="context-description"> <p>This primary action button uses tactile feedback and visual cues to confirm user actions on mobile devices.</p> </div> <div class="button-state-examples"> <div class="state-example"> <div class="state-button state-default">Default</div> <span>Normal</span> </div> <div class="state-example"> <div class="state-button state-hover">Hover</div> <span>Hover</span> </div> <div class="state-example"> <div class="state-button state-active">Active</div> <span>Pressed</span> </div> <div class="state-example"> <div class="state-button state-loading"> Load <div class="loading-animation"></div> </div> <span>Loading</span> </div> </div> </div> <div class="custom-actions"> <button class="custom-button"> <div class="button-icon-container"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="#384053" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9 22V12H15V22" stroke="#384053" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span class="button-label">Home</span> </button> <button class="custom-button"> <div class="button-icon-container"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.84 4.61C20.3292 4.099 19.7228 3.69365 19.0554 3.41708C18.3879 3.14052 17.6725 2.99817 16.95 2.99817C16.2275 2.99817 15.5121 3.14052 14.8446 3.41708C14.1772 3.69365 13.5708 4.099 13.06 4.61L12 5.67L10.94 4.61C9.9083 3.57831 8.50903 2.99871 7.05 2.99871C5.59096 2.99871 4.19169 3.57831 3.16 4.61C2.1283 5.64169 1.54871 7.04097 1.54871 8.5C1.54871 9.95903 2.1283 11.3583 3.16 12.39L4.22 13.45L12 21.23L19.78 13.45L20.84 12.39C21.351 11.8792 21.7563 11.2728 22.0329 10.6054C22.3095 9.93791 22.4518 9.22248 22.4518 8.5C22.4518 7.77752 22.3095 7.06209 22.0329 6.39464C21.7563 5.7272 21.351 5.12075 20.84 4.61Z" stroke="#384053" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span class="button-label">Favorites</span> </button> <button class="custom-button"> <div class="button-icon-container"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="#384053" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="#384053" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span class="button-label">Profile</span> </button> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const actionButton = document.getElementById('actionButton'); const successMessage = document.getElementById('successMessage'); const progressIndicator = document.querySelector('.progress-indicator'); actionButton.addEventListener('click', function(e) { // Create ripple effect const ripple = document.createElement('span'); ripple.classList.add('ripple'); const rect = actionButton.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; actionButton.appendChild(ripple); // Scale effect actionButton.style.transform = 'scale(0.96)'; // Start progress indicator progressIndicator.style.width = '100%'; // Simulate a loading state actionButton.disabled = true; // Remove ripple after animation completes setTimeout(() => { ripple.remove(); }, 600); // Reset button scale setTimeout(() => { actionButton.style.transform = 'scale(1)'; }, 200); // Simulate action completion setTimeout(() => { progressIndicator.style.width = '0'; actionButton.disabled = false; successMessage.classList.add('active'); // Hide success message after a delay setTimeout(() => { successMessage.classList.remove('active'); }, 3000); }, 800); }); // Add hover/touch state simulations for the example buttons const stateButtons = document.querySelectorAll('.state-button'); stateButtons.forEach(button => { button.addEventListener('mouseenter', function() { if (this.classList.contains('state-default')) { this.style.transform = 'translateY(-2px)'; this.style.boxShadow = '0 6px 12px var(--shadow-color)'; } }); button.addEventListener('mouseleave', function() { if (this.classList.contains('state-default')) { this.style.transform = ''; this.style.boxShadow = ''; } }); button.addEventListener('mousedown', function() { if (this.classList.contains('state-default')) { this.style.transform = 'scale(0.96)'; this.style.boxShadow = '0 2px 4px var(--shadow-color)'; } }); button.addEventListener('mouseup', function() { if (this.classList.contains('state-default')) { this.style.transform = ''; this.style.boxShadow = ''; } }); }); }); </script> </body> </html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive Learning Platform Button</title> <style> :root { --primary: #4e73df; --primary-light: #6a8bff; --secondary: #26a69a; --tertiary: #f7c331; --dark: #2c3e50; --light: #f8f9fa; --transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background-color: #f0f4f8; padding: 20px; } .platform-container { width: 100%; max-width: 650px; background-color: white; border-radius: 12px; padding: 32px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); text-align: center; position: relative; overflow: hidden; } .pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.05; background-image: radial-gradient(var(--primary) 2px, transparent 2px); background-size: 30px 30px; } .header { position: relative; z-index: 1; margin-bottom: 24px; } h1 { color: var(--dark); font-size: 2.2rem; font-weight: 700; margin-bottom: 12px; background: linear-gradient(to right, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } p { color: #5a6270; line-height: 1.6; margin-bottom: 20px; font-size: 1.1rem; } .courses-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 30px 0; position: relative; z-index: 1; } .course-card { background-color: #f9fafc; border-radius: 8px; padding: 20px; text-align: left; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: transform var(--transition), box-shadow var(--transition); cursor: pointer; position: relative; overflow: hidden; } .course-card:hover { transform: translateY(-5px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } .course-card h3 { font-size: 1.2rem; color: var(--dark); margin-bottom: 10px; position: relative; } .course-card p { font-size: 0.9rem; color: #6c757d; margin-bottom: 15px; } .progress-container { width: 100%; height: 6px; background-color: #e9ecef; border-radius: 10px; overflow: hidden; margin-bottom: 15px; } .progress-bar { height: 100%; border-radius: 10px; background: linear-gradient(to right, var(--primary), var(--primary-light)); width: 0; transition: width 1s ease-in-out; } .btn-container { position: relative; z-index: 5; display: inline-block; } .btn-learning { display: inline-flex; align-items: center; justify-content: center; position: relative; padding: 12px 28px; background-color: transparent; color: var(--primary); border: 2px solid var(--primary); border-radius: 6px; font-weight: 600; font-size: 1rem; cursor: pointer; overflow: hidden; transition: color var(--transition), border-color var(--transition); outline: none; z-index: 1; } .btn-learning::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: var(--primary); z-index: -1; transition: width var(--transition); } .btn-learning:hover { color: white; } .btn-learning:hover::before { width: 100%; } .btn-learning::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: var(--tertiary); transform: translateX(-50%); transition: width var(--transition); } .btn-learning:hover::after { width: 100%; } .btn-learning .icon { margin-left: 8px; transition: transform var(--transition); } .btn-learning:hover .icon { transform: translateX(5px); } .btn-ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.7); transform: scale(0); animation: ripple 0.6s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(4); opacity: 0; } } .badge { position: absolute; top: 10px; right: 10px; background-color: var(--tertiary); color: var(--dark); font-size: 0.7rem; font-weight: 600; padding: 4px 10px; border-radius: 10px; } .animated-underline { position: relative; } .animated-underline::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--secondary); transition: width var(--transition); } .course-card:hover .animated-underline::after { width: 100%; } @media (max-width: 600px) { .platform-container { padding: 20px; } h1 { font-size: 1.8rem; } p { font-size: 1rem; } .courses-container { grid-template-columns: 1fr; } .btn-learning { width: 100%; } } </style> </head> <body> <div class="platform-container"> <div class="pattern"></div> <div class="header"> <h1>EduSphere Learning</h1> <p>Discover interactive courses tailored to your learning style and pace. Continue where you left off or explore new educational journeys.</p> </div> <div class="courses-container"> <div class="course-card"> <span class="badge">In Progress</span> <h3 class="animated-underline">Data Science Fundamentals</h3> <p>Master statistical concepts and Python implementation for real-world data analysis.</p> <div class="progress-container"> <div class="progress-bar" data-progress="65"></div> </div> <span style="font-size: 0.8rem; color: #6c757d;">65% completed</span> </div> <div class="course-card"> <span class="badge">New</span> <h3 class="animated-underline">UX Design Principles</h3> <p>Learn the essential elements of creating intuitive and engaging user experiences.</p> <div class="progress-container"> <div class="progress-bar" data-progress="0"></div> </div> <span style="font-size: 0.8rem; color: #6c757d;">Not started yet</span> </div> </div> <div class="btn-container"> <button class="btn-learning"> Continue Learning <span class="icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> </button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Progress bars animation const progressBars = document.querySelectorAll('.progress-bar'); function animateProgressBars() { progressBars.forEach(bar => { const progressValue = bar.getAttribute('data-progress'); setTimeout(() => { bar.style.width = progressValue + '%'; }, 300); }); } animateProgressBars(); // Button ripple effect const button = document.querySelector('.btn-learning'); button.addEventListener('click', function(e) { const x = e.clientX - e.target.getBoundingClientRect().left; const y = e.clientY - e.target.getBoundingClientRect().top; const ripple = document.createElement('span'); ripple.classList.add('btn-ripple'); ripple.style.left = x + 'px'; ripple.style.top = y + 'px'; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); // Simulate a course loading transition document.querySelector('.platform-container').style.opacity = '0.8'; setTimeout(() => { document.querySelector('.platform-container').style.opacity = '1'; }, 400); }); // Course cards interaction const courseCards = document.querySelectorAll('.course-card'); courseCards.forEach(card => { card.addEventListener('click', function() { // Add subtle animation to show it's clickable this.style.transform = 'scale(0.98)'; setTimeout(() => { this.style.transform = ''; }, 150); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Food Delivery Order Button</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background-color: #f8f8f8; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; padding: 20px; } .container { width: 100%; max-width: 600px; background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%); border-radius: 24px; padding: 30px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08); position: relative; overflow: hidden; } .food-card { display: flex; align-items: center; margin-bottom: 25px; position: relative; } .food-image { width: 100px; height: 100px; border-radius: 16px; object-fit: cover; margin-right: 20px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); } .food-details h2 { font-size: 1.8rem; font-weight: 700; color: #333; margin-bottom: 5px; } .food-details p { font-size: 0.95rem; color: #666; margin-bottom: 8px; } .food-details .rating { display: flex; align-items: center; color: #FF8C00; font-weight: 600; } .food-details .rating .stars { color: #FF8C00; margin-right: 5px; } .price { font-size: 1.5rem; font-weight: 700; color: #FF5722; margin-top: 10px; } .delivery-info { display: flex; justify-content: space-between; background-color: #FFF4E6; border-radius: 12px; padding: 12px 20px; margin-bottom: 25px; box-shadow: 0 4px 8px rgba(255, 87, 34, 0.08); } .delivery-info div { text-align: center; } .delivery-info .info-label { font-size: 0.8rem; color: #666; margin-bottom: 4px; } .delivery-info .info-value { font-weight: 600; color: #333; font-size: 0.95rem; } .fast-icon { color: #FF9800; } .order-button-container { position: relative; width: 100%; height: 65px; margin-top: 20px; } .order-button { position: absolute; width: 100%; height: 100%; background: linear-gradient(135deg, #FF9800 0%, #FF5722 100%); border: none; border-radius: 50px; color: white; font-size: 1.1rem; font-weight: 600; cursor: pointer; box-shadow: 0 10px 20px rgba(255, 87, 34, 0.2); transition: all 0.3s ease; overflow: hidden; display: flex; justify-content: center; align-items: center; outline: none; } .order-button:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(255, 87, 34, 0.25); } .order-button .button-text { position: relative; z-index: 2; display: flex; align-items: center; transition: transform 0.3s ease; } .order-button .button-icon { margin-left: 8px; font-size: 1.2rem; } .order-button .vehicle { position: absolute; left: -50px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; opacity: 0; z-index: 2; transition: all 0.5s ease; } .order-button.active .vehicle { animation: driveAcross 1.2s forwards; } .order-button.active .button-text { animation: fadeTextOut 0.3s forwards; } .order-button::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #FF5722 0%, #FF9800 100%); opacity: 0; border-radius: 50px; transition: opacity 0.3s ease; } .order-button:active::after { opacity: 1; } .pulse-ring { position: absolute; width: 100%; height: 100%; border-radius: 50px; background-color: rgba(255, 87, 34, 0.2); z-index: 0; transform: scale(1); opacity: 0; } .success-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-weight: 600; opacity: 0; z-index: 2; } .order-progress { position: absolute; bottom: 0; left: 0; height: 4px; background-color: white; width: 0%; border-radius: 0 0 50px 50px; transition: width 1s ease; } .quantity-selector { display: flex; align-items: center; margin-bottom: 25px; } .quantity-selector button { width: 36px; height: 36px; border: none; background-color: #f5f5f5; border-radius: 50%; font-size: 1.2rem; color: #FF5722; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: all 0.2s ease; } .quantity-selector button:hover { background-color: #eeeeee; transform: scale(1.05); } .quantity-selector button:active { transform: scale(0.95); } .quantity-selector span { margin: 0 15px; font-size: 1.1rem; font-weight: 600; color: #333; } @keyframes driveAcross { 0% { left: -50px; opacity: 1; } 70% { left: calc(50% - 15px); opacity: 1; } 100% { left: calc(100% + 50px); opacity: 1; } } @keyframes fadeTextOut { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } } @keyframes pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.5); opacity: 0; } } .menu-tag { position: absolute; right: -5px; top: 15px; background-color: #FF5722; color: white; padding: 3px 12px; font-size: 0.8rem; font-weight: 600; border-radius: 20px 0 0 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } @media (max-width: 600px) { .container { padding: 20px; border-radius: 18px; } .food-image { width: 80px; height: 80px; } .food-details h2 { font-size: 1.5rem; } .delivery-info { padding: 10px 15px; } .order-button { height: 55px; font-size: 1rem; } } </style> </head> <body> <div class="container"> <div class="food-card"> <img src="https://images.unsplash.com/photo-1594212699903-ec8a3eca50f5?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Deluxe Burger" class="food-image"> <div class="food-details"> <h2>Deluxe Burger</h2> <p>Angus beef patty with caramelized onions and special sauce</p> <div class="rating"> <span class="stars">★★★★★</span> <span>4.8 (239)</span> </div> <div class="price">$12.99</div> </div> <div class="menu-tag">Best Seller</div> </div> <div class="quantity-selector"> <button class="decrease">-</button> <span class="quantity-value">1</span> <button class="increase">+</button> </div> <div class="delivery-info"> <div> <div class="info-label">Delivery Time</div> <div class="info-value"><span class="fast-icon">⚡</span> 15-20 min</div> </div> <div> <div class="info-label">Delivery Fee</div> <div class="info-value">$1.99</div> </div> <div> <div class="info-label">Distance</div> <div class="info-value">1.2 miles</div> </div> </div> <div class="order-button-container"> <button class="order-button"> <span class="vehicle">🛵</span> <span class="button-text">Order Now <span class="button-icon">→</span></span> <div class="pulse-ring"></div> <span class="success-message">Order Placed!</span> <div class="order-progress"></div> </button> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const orderButton = document.querySelector('.order-button'); const pulseRing = document.querySelector('.pulse-ring'); const successMessage = document.querySelector('.success-message'); const orderProgress = document.querySelector('.order-progress'); const decreaseBtn = document.querySelector('.decrease'); const increaseBtn = document.querySelector('.increase'); const quantityValue = document.querySelector('.quantity-value'); let quantity = 1; let isAnimating = false; // Quantity selector functionality decreaseBtn.addEventListener('click', () => { if (quantity > 1) { quantity--; quantityValue.textContent = quantity; } }); increaseBtn.addEventListener('click', () => { quantity++; quantityValue.textContent = quantity; }); // Order button hover effect orderButton.addEventListener('mouseenter', () => { if (!isAnimating) { pulseRing.style.animation = 'pulse 1s infinite'; } }); orderButton.addEventListener('mouseleave', () => { pulseRing.style.animation = ''; }); // Order button click animation orderButton.addEventListener('click', () => { if (isAnimating) return; isAnimating = true; orderButton.classList.add('active'); pulseRing.style.animation = ''; // Animate progress bar setTimeout(() => { orderProgress.style.width = '100%'; }, 300); // Show success message after vehicle animation setTimeout(() => { successMessage.style.opacity = '1'; }, 1000); // Reset button after animation completed setTimeout(() => { orderButton.classList.remove('active'); successMessage.style.opacity = '0'; orderProgress.style.width = '0%'; isAnimating = false; }, 2500); }); // Add tactile feedback const buttons = document.querySelectorAll('button'); buttons.forEach(button => { button.addEventListener('mousedown', () => { button.style.transform = 'scale(0.95)'; }); button.addEventListener('mouseup', () => { button.style.transform = ''; }); button.addEventListener('mouseleave', () => { button.style.transform = ''; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SaaS Subscription Activation</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f8f9fa; padding: 20px; } .subscription-container { width: 100%; max-width: 650px; background-color: #ffffff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); padding: 40px; position: relative; overflow: hidden; } .pattern-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.03; pointer-events: none; z-index: 0; } .subscription-header { text-align: center; margin-bottom: 30px; position: relative; z-index: 1; } .subscription-header h1 { color: #2d3748; font-size: 28px; margin-bottom: 10px; font-weight: 600; } .subscription-header p { color: #718096; font-size: 16px; line-height: 1.6; } .plan-details { background-color: #f7fafc; border-radius: 12px; padding: 25px; margin-bottom: 30px; border: 1px solid #e2e8f0; position: relative; z-index: 1; } .plan-name { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .plan-name h2 { color: #2d3748; font-size: 22px; font-weight: 600; } .plan-price { display: flex; align-items: baseline; } .price { color: #4a5568; font-size: 24px; font-weight: 700; } .period { color: #718096; font-size: 14px; margin-left: 5px; } .feature-list { list-style: none; } .feature-item { display: flex; align-items: center; margin-bottom: 12px; color: #4a5568; } .feature-icon { color: #5a67d8; margin-right: 12px; display: flex; align-items: center; justify-content: center; } .activation-button { position: relative; display: block; width: 100%; padding: 16px 24px; background-color: #5a67d8; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; overflow: hidden; transition: all 0.3s ease; z-index: 1; outline: none; } .button-container { position: relative; z-index: 1; } .activation-button:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.1); transform: translateX(-100%); transition: transform 0.5s ease; } .activation-button:hover:before { transform: translateX(0); } .activation-button:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #5a67d8; border-radius: 8px; opacity: 0; transition: all 0.3s ease; box-sizing: border-box; } .activation-button:hover { background-color: #4c51bf; transform: translateY(-2px); box-shadow: 0 7px 14px rgba(90, 103, 216, 0.2); } .activation-button:hover:after { opacity: 1; top: -6px; left: -6px; width: calc(100% + 12px); height: calc(100% + 12px); } .button-text { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; } .button-icon { margin-left: 10px; transition: transform 0.3s ease; } .activation-button:hover .button-icon { transform: translateX(5px); } .success-message { display: none; text-align: center; margin-top: 20px; color: #48bb78; font-weight: 600; opacity: 0; transition: opacity 0.5s ease; } .success-message.show { opacity: 1; } .guarantee { display: flex; align-items: center; justify-content: center; margin-top: 20px; color: #718096; font-size: 14px; } .guarantee-icon { margin-right: 8px; } @media (max-width: 600px) { .subscription-container { padding: 25px; } .subscription-header h1 { font-size: 24px; } .plan-name { flex-direction: column; align-items: flex-start; } .plan-price { margin-top: 10px; } } /* Progress animation */ .progress-ring { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; } .progress-ring circle { stroke: white; fill: transparent; stroke-width: 4; stroke-dasharray: 100; stroke-dashoffset: 100; animation: progress 2s linear forwards; } @keyframes progress { to { stroke-dashoffset: 0; } } /* Success checkmark animation */ .checkmark { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); z-index: 3; } .checkmark.show { display: block; animation: scale 0.5s ease-in-out forwards; } @keyframes scale { 0% { transform: translate(-50%, -50%) scale(0); } 50% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1); } } .pulse { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; background-color: rgba(90, 103, 216, 0.8); z-index: 1; opacity: 0; transform: scale(0.8); } .pulse.animate { animation: pulse 1s ease-out; } @keyframes pulse { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } } </style> </head> <body> <div class="subscription-container"> <div class="pattern-bg"> <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> <pattern id="pattern" width="40" height="40" patternUnits="userSpaceOnUse"> <circle cx="20" cy="20" r="1.5" fill="#5a67d8" /> </pattern> <rect width="100%" height="100%" fill="url(#pattern)" /> </svg> </div> <div class="subscription-header"> <h1>Activate Your CloudSuite Pro</h1> <p>Unlock the full potential of your workflow with our enterprise-grade tools.</p> </div> <div class="plan-details"> <div class="plan-name"> <h2>Enterprise Plan</h2> <div class="plan-price"> <span class="price">$79</span> <span class="period">/month</span> </div> </div> <ul class="feature-list"> <li class="feature-item"> <span class="feature-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> <span>Unlimited Cloud Storage & Backup</span> </li> <li class="feature-item"> <span class="feature-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> <span>Advanced Analytics Dashboard</span> </li> <li class="feature-item"> <span class="feature-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> <span>Priority 24/7 Technical Support</span> </li> <li class="feature-item"> <span class="feature-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> <span>Multi-team Collaboration Tools</span> </li> </ul> </div> <div class="button-container"> <button id="activateButton" class="activation-button"> <div class="pulse"></div> <div class="button-text"> <span>Activate Subscription</span> <span class="button-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> </div> <svg class="progress-ring" width="30" height="30" viewBox="0 0 30 30"> <circle cx="15" cy="15" r="13" /> </svg> <svg class="checkmark" width="30" height="30" viewBox="0 0 30 30"> <path d="M7 15L12 20L23 9" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <div id="successMessage" class="success-message"> Your subscription has been activated successfully! </div> </div> <div class="guarantee"> <span class="guarantee-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> <span>30-day money-back guarantee, no questions asked</span> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const activateButton = document.getElementById('activateButton'); const buttonText = activateButton.querySelector('.button-text'); const progressRing = activateButton.querySelector('.progress-ring'); const checkmark = activateButton.querySelector('.checkmark'); const successMessage = document.getElementById('successMessage'); const pulse = activateButton.querySelector('.pulse'); activateButton.addEventListener('click', function() { // Disable button to prevent multiple clicks activateButton.disabled = true; // Add pulse animation pulse.classList.add('animate'); // Hide text, show progress ring buttonText.style.opacity = '0'; setTimeout(() => { buttonText.style.display = 'none'; progressRing.style.display = 'block'; }, 200); // Simulate activation process setTimeout(() => { // Hide progress ring, show checkmark progressRing.style.display = 'none'; checkmark.classList.add('show'); // Show success message setTimeout(() => { successMessage.style.display = 'block'; setTimeout(() => { successMessage.classList.add('show'); }, 50); }, 400); // Reset button after delay (for demo purposes) setTimeout(() => { buttonText.style.display = 'flex'; buttonText.style.opacity = '1'; checkmark.classList.remove('show'); pulse.classList.remove('animate'); activateButton.disabled = false; successMessage.classList.remove('show'); setTimeout(() => { successMessage.style.display = 'none'; }, 500); }, 5000); }, 2000); }); // Create a subtle interactive pattern animation const pattern = document.querySelector('.pattern-bg'); let patternX = 0; let patternY = 0; document.addEventListener('mousemove', function(e) { const containerRect = document.querySelector('.subscription-container').getBoundingClientRect(); const relativeX = (e.clientX - containerRect.left) / containerRect.width; const relativeY = (e.clientY - containerRect.top) / containerRect.height; patternX = relativeX * 10; patternY = relativeY * 10; pattern.style.transform = `translate(${patternX}px, ${patternY}px)`; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f5f7fa; overflow: hidden; padding: 20px; } .container { width: 100%; max-width: 650px; background: linear-gradient(135deg, #ffffff, #f0f4ff); padding: 40px; border-radius: 20px; box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); text-align: center; position: relative; z-index: 1; overflow: hidden; } .container::before { content: ''; position: absolute; top: -10px; right: -10px; width: 150px; height: 150px; background: linear-gradient(135deg, #6e8efb, #a777e3); border-radius: 50%; opacity: 0.15; z-index: -1; } .container::after { content: ''; position: absolute; bottom: -20px; left: -20px; width: 180px; height: 180px; background: linear-gradient(135deg, #38bdf8, #4f46e5); border-radius: 50%; opacity: 0.1; z-index: -1; } h1 { color: #4338ca; margin-bottom: 12px; font-size: 2rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } p { color: #4b5563; margin-bottom: 30px; line-height: 1.6; font-size: 1.05rem; } .course-info { background: rgba(255, 255, 255, 0.7); padding: 20px; border-radius: 12px; margin-bottom: 30px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); border: 1px solid rgba(209, 213, 219, 0.5); position: relative; overflow: hidden; } .course-info::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: linear-gradient(to bottom, #4f46e5, #38bdf8); border-radius: 4px 0 0 4px; } .feature-list { text-align: left; margin-bottom: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .feature-item { display: flex; align-items: center; margin-bottom: 12px; } .icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: linear-gradient(135deg, #38bdf8, #4f46e5); border-radius: 50%; margin-right: 10px; color: white; font-weight: bold; font-size: 14px; } .enrollment-button { position: relative; background: linear-gradient(135deg, #4f46e5, #38bdf8); color: white; border: none; padding: 15px 35px; font-size: 1.1rem; font-weight: 600; border-radius: 50px; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 4px 6px rgba(79, 70, 229, 0.2); overflow: hidden; transform-origin: center; margin: 10px auto; display: block; width: 80%; max-width: 300px; } .enrollment-button:hover { transform: scale(1.05); box-shadow: 0 7px 14px rgba(79, 70, 229, 0.3), 0 3px 6px rgba(0, 0, 0, 0.1); } .enrollment-button:active { transform: scale(0.98); } .button-content { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; } .button-icon { margin-left: 10px; } .pulse { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.3); border-radius: 50px; transform: scale(0); opacity: 0; } .limited-offer { margin-top: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: #374151; } .timer { display: inline-flex; background-color: #4f46e5; color: white; padding: 4px 8px; border-radius: 4px; margin-left: 10px; font-weight: bold; } .course-details { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 20px; } .detail { flex: 1; padding: 10px; background: rgba(79, 70, 229, 0.05); border-radius: 8px; display: flex; flex-direction: column; align-items: center; } .detail-icon { font-size: 20px; color: #4f46e5; margin-bottom: 5px; } .detail-label { font-size: 0.8rem; color: #6b7280; } .detail-value { font-weight: bold; color: #374151; font-size: 0.9rem; } @keyframes waveAnimation { 0% { transform: translateX(0) translateY(0); } 50% { transform: translateX(10px) translateY(-5px); } 100% { transform: translateX(0) translateY(0); } } .wave-animation { animation: waveAnimation 4s ease-in-out infinite; } @keyframes pulse { 0% { transform: scale(0); opacity: 0.7; } 50% { opacity: 0.3; } 100% { transform: scale(2.5); opacity: 0; } } .animate-pulse .pulse { animation: pulse 1.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; } .stars { color: #facc15; margin-bottom: 5px; font-size: 1.1rem; } .students-count { font-size: 0.85rem; color: #6b7280; margin-bottom: 25px; } @media (max-width: 580px) { .container { padding: 25px 20px; } h1 { font-size: 1.7rem; } .feature-list { grid-template-columns: 1fr; } .course-details { flex-direction: column; gap: 10px; } .enrollment-button { width: 100%; max-width: none; padding: 12px 25px; } } </style> </head> <body> <div class="container"> <h1>Data Science Fundamentals <span class="wave-animation">🚀</span></h1> <div class="stars">★★★★★</div> <div class="students-count">4,826 students enrolled this month</div> <div class="course-details"> <div class="detail"> <div class="detail-icon">📅</div> <div class="detail-value">8 weeks</div> <div class="detail-label">Duration</div> </div> <div class="detail"> <div class="detail-icon">🎓</div> <div class="detail-value">Beginner</div> <div class="detail-label">Level</div> </div> <div class="detail"> <div class="detail-icon">🎯</div> <div class="detail-value">Certification</div> <div class="detail-label">Completion</div> </div> </div> <div class="course-info"> <div class="feature-list"> <div class="feature-item"> <span class="icon">✓</span> <span>Live online sessions with experts</span> </div> <div class="feature-item"> <span class="icon">✓</span> <span>Hands-on Python & R projects</span> </div> <div class="feature-item"> <span class="icon">✓</span> <span>24/7 learning support</span> </div> <div class="feature-item"> <span class="icon">✓</span> <span>Industry-recognized certificate</span> </div> </div> </div> <p>Master the fundamentals of data science with our comprehensive course. From statistical analysis to machine learning, you'll build real-world skills that top employers are looking for right now.</p> <button class="enrollment-button" id="enrollButton"> <div class="pulse"></div> <div class="button-content"> Enroll Now <svg class="button-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M5 12h14m-7-7l7 7-7 7"></path> </svg> </div> </button> <div class="limited-offer"> <span>Limited time offer! Enrollment closes in:</span> <span class="timer" id="countdown">23:45:12</span> </div> </div> <script> const enrollButton = document.getElementById('enrollButton'); const countdown = document.getElementById('countdown'); // Pulse animation on button hover enrollButton.addEventListener('mouseenter', () => { enrollButton.classList.add('animate-pulse'); }); enrollButton.addEventListener('mouseleave', () => { setTimeout(() => { enrollButton.classList.remove('animate-pulse'); }, 1500); }); // Button click animation enrollButton.addEventListener('click', function(e) { e.preventDefault(); const button = this; button.style.pointerEvents = 'none'; button.style.backgroundColor = '#3730a3'; // Create and show the success message const successIndicator = document.createElement('div'); successIndicator.style.position = 'absolute'; successIndicator.style.top = '0'; successIndicator.style.left = '0'; successIndicator.style.width = '100%'; successIndicator.style.height = '100%'; successIndicator.style.display = 'flex'; successIndicator.style.alignItems = 'center'; successIndicator.style.justifyContent = 'center'; successIndicator.style.backgroundColor = 'rgba(79, 70, 229, 0.95)'; successIndicator.style.borderRadius = '50px'; successIndicator.style.color = 'white'; successIndicator.style.zIndex = '10'; successIndicator.style.fontWeight = 'bold'; successIndicator.style.opacity = '0'; successIndicator.style.transition = 'opacity 0.5s ease'; successIndicator.innerText = '✓ Enrolled Successfully!'; button.appendChild(successIndicator); setTimeout(() => { successIndicator.style.opacity = '1'; }, 10); setTimeout(() => { successIndicator.style.opacity = '0'; setTimeout(() => { button.removeChild(successIndicator); button.style.pointerEvents = 'auto'; button.style.backgroundColor = ''; }, 500); }, 2000); }); // Countdown timer functionality function updateCountdown() { const time = countdown.textContent.split(':'); let hours = parseInt(time[0], 10); let minutes = parseInt(time[1], 10); let seconds = parseInt(time[2], 10); seconds--; if (seconds < 0) { seconds = 59; minutes--; if (minutes < 0) { minutes = 59; hours--; if (hours < 0) { hours = 23; } } } countdown.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; } // Update the countdown every second setInterval(updateCountdown, 1000); // Add periodic pulse to the button to draw attention function pulsateButton() { if (!enrollButton.classList.contains('animate-pulse')) { enrollButton.classList.add('animate-pulse'); setTimeout(() => { enrollButton.classList.remove('animate-pulse'); }, 1500); } } // Pulsate the button every 5 seconds to draw attention setInterval(pulsateButton, 5000); // Initial pulsate after page load setTimeout(pulsateButton, 1500); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fitness App Start Workout Button</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #1a2a6c, #2a4858); font-family: 'Poppins', sans-serif; overflow: hidden; padding: 20px; } .container { width: 100%; max-width: 600px; text-align: center; } .app-header { margin-bottom: 40px; color: white; } .app-header h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 10px; letter-spacing: -0.5px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .app-header p { font-size: 1.1rem; opacity: 0.9; } .metrics { display: flex; justify-content: space-between; margin-bottom: 40px; } .metric { background: rgba(255, 255, 255, 0.15); border-radius: 15px; padding: 15px; width: 31%; color: white; backdrop-filter: blur(10px); transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .metric:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .metric h3 { font-size: 2rem; font-weight: 700; margin-bottom: 5px; } .metric p { font-size: 0.85rem; opacity: 0.8; } .button-container { position: relative; z-index: 1; margin: 30px 0; } .start-button { position: relative; display: inline-block; padding: 18px 40px; font-size: 1.5rem; font-weight: 700; text-transform: uppercase; background: linear-gradient(45deg, #ff4d4d, #ff8019); color: white; border: none; border-radius: 50px; cursor: pointer; overflow: hidden; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease; box-shadow: 0 10px 30px rgba(255, 77, 77, 0.3); outline: none; letter-spacing: 1px; } .start-button:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 15px 35px rgba(255, 77, 77, 0.4); } .start-button:active { transform: translateY(2px) scale(0.98); box-shadow: 0 5px 15px rgba(255, 77, 77, 0.3); } .start-button span { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; } .start-button .icon { display: inline-flex; margin-left: 10px; font-size: 1.7rem; } .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.7); transform: scale(0); animation: ripple 0.6s linear; pointer-events: none; } .pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120%; height: 120%; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%); border-radius: 50%; animation: pulse 1.5s ease-out infinite; z-index: -1; } .workout-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-top: 30px; max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s ease; opacity: 0; } .workout-options.show { max-height: 600px; opacity: 1; } .workout-card { background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 15px; text-align: center; color: white; cursor: pointer; transition: transform 0.3s ease, background 0.3s ease; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.1); } .workout-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.2); } .workout-card:active { transform: translateY(0); } .workout-icon { font-size: 2rem; margin-bottom: 10px; } .workout-name { font-weight: 600; font-size: 0.9rem; } @keyframes ripple { to { transform: scale(4); opacity: 0; } } @keyframes pulse { 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; } } @media (max-width: 600px) { .app-header h1 { font-size: 2rem; } .app-header p { font-size: 0.95rem; } .metrics { flex-direction: column; gap: 15px; } .metric { width: 100%; } .start-button { padding: 15px 30px; font-size: 1.2rem; } } </style> </head> <body> <div class="container"> <div class="app-header"> <h1>PULSE</h1> <p>Your workout, your pace, your results.</p> </div> <div class="metrics"> <div class="metric"> <h3>12</h3> <p>Workouts This Month</p> </div> <div class="metric"> <h3>32k</h3> <p>Total Calories Burned</p> </div> <div class="metric"> <h3>6.2</h3> <p>Longest Run (mi)</p> </div> </div> <div class="button-container"> <button class="start-button" id="startButton"> <span>START WORKOUT <div class="icon">▶</div></span> <div class="pulse"></div> </button> </div> <div class="workout-options" id="workoutOptions"> <div class="workout-card"> <div class="workout-icon">🏃</div> <div class="workout-name">HIIT Run</div> </div> <div class="workout-card"> <div class="workout-icon">💪</div> <div class="workout-name">Upper Body</div> </div> <div class="workout-card"> <div class="workout-icon">🏋️</div> <div class="workout-name">Core Strength</div> </div> <div class="workout-card"> <div class="workout-icon">🚲</div> <div class="workout-name">Cycling</div> </div> <div class="workout-card"> <div class="workout-icon">🧘</div> <div class="workout-name">Cool Down</div> </div> <div class="workout-card"> <div class="workout-icon">⏱️</div> <div class="workout-name">Tabata</div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const startButton = document.getElementById('startButton'); const workoutOptions = document.getElementById('workoutOptions'); // Ripple effect on button click startButton.addEventListener('click', function(e) { let x = e.clientX - e.target.getBoundingClientRect().left; let y = e.clientY - e.target.getBoundingClientRect().top; let ripple = document.createElement('span'); ripple.className = 'ripple'; ripple.style.left = x + 'px'; ripple.style.top = y + 'px'; this.appendChild(ripple); // Slight scale effect this.style.transform = 'scale(1.05)'; setTimeout(() => { this.style.transform = ''; }, 200); // Toggle workout options workoutOptions.classList.toggle('show'); // Auto remove ripple setTimeout(() => { ripple.remove(); }, 600); }); // Workout card selection effect const workoutCards = document.querySelectorAll('.workout-card'); workoutCards.forEach(card => { card.addEventListener('click', function() { // Visual feedback on selection this.style.background = 'rgba(255, 77, 77, 0.3)'; setTimeout(() => { this.style.background = ''; workoutOptions.classList.remove('show'); // Show button activation startButton.innerHTML = `<span>WORKOUT STARTED <div class="icon">✓</div></span><div class="pulse"></div>`; startButton.style.background = 'linear-gradient(45deg, #32CD32, #00AB66)'; startButton.style.boxShadow = '0 10px 30px rgba(50, 205, 50, 0.3)'; // Reset after 3 seconds setTimeout(() => { startButton.innerHTML = `<span>START WORKOUT <div class="icon">▶</div></span><div class="pulse"></div>`; startButton.style.background = 'linear-gradient(45deg, #ff4d4d, #ff8019)'; startButton.style.boxShadow = '0 10px 30px rgba(255, 77, 77, 0.3)'; }, 3000); }, 300); }); }); }); </script> </body> </html>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 700px; background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%); color: white; overflow: hidden; } .player-container { position: relative; width: 100%; max-width: 650px; background: rgba(15, 15, 26, 0.8); border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); padding: 30px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; } .album-art { width: 200px; height: 200px; border-radius: 15px; margin: 0 auto 25px; background: url('https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80') center/cover; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); position: relative; overflow: hidden; transition: transform 0.5s ease; } .album-art:hover { transform: scale(1.03); } .album-art::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%); opacity: 0; transition: opacity 0.5s ease; } .album-art:hover::after { opacity: 1; } .song-info { text-align: center; margin-bottom: 30px; } .song-title { font-size: 24px; font-weight: 700; margin-bottom: 8px; background: linear-gradient(90deg, #e94057, #8a2be2, #4776e6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 0.5px; } .artist-name { font-size: 16px; color: rgba(255, 255, 255, 0.7); letter-spacing: 1px; font-weight: 500; } .controls { display: flex; justify-content: center; align-items: center; margin-bottom: 30px; } .play-button { width: 80px; height: 80px; border-radius: 50%; border: none; background: linear-gradient(145deg, #4776e6, #8a2be2); position: relative; cursor: pointer; box-shadow: 0 10px 20px rgba(71, 118, 230, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; outline: none; } .play-button:hover { transform: scale(1.05); box-shadow: 0 15px 30px rgba(71, 118, 230, 0.4); } .play-button:active { transform: scale(0.95); } .play-button::before { content: ''; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%); width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 25px solid white; transition: opacity 0.3s ease; z-index: 2; } .play-button.playing::before { opacity: 0; } .pause-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25px; height: 25px; opacity: 0; transition: opacity 0.3s ease; z-index: 2; } .pause-icon::before, .pause-icon::after { content: ''; position: absolute; background: white; width: 6px; height: 25px; border-radius: 3px; } .pause-icon::before { left: 6px; } .pause-icon::after { right: 6px; } .play-button.playing .pause-icon { opacity: 1; } .play-button-ripple { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transform: scale(0); opacity: 1; z-index: 1; } .control-btn { width: 50px; height: 50px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.1); color: white; margin: 0 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, transform 0.3s ease; } .control-btn:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.05); } .control-btn svg { width: 20px; height: 20px; fill: white; } .progress-container { width: 100%; height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; margin-bottom: 15px; cursor: pointer; position: relative; overflow: hidden; } .progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #4776e6, #8a2be2); border-radius: 4px; position: relative; transition: width 0.1s linear; } .progress-pulse { position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: white; box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); } .time-display { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255, 255, 255, 0.7); margin-bottom: 20px; } .visualizer { display: flex; justify-content: center; align-items: flex-end; height: 60px; margin-top: 15px; } .bar { width: 4px; height: 5px; margin: 0 2px; background: linear-gradient(to top, #4776e6, #8a2be2); border-radius: 2px; transition: height 0.2s ease; } .play-waves { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 50%; pointer-events: none; } .wave { position: absolute; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; opacity: 0; } @keyframes ripple { 0% { transform: scale(0.1); opacity: 0.8; } 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } .additional-info { margin-top: 20px; display: flex; justify-content: space-between; font-size: 14px; color: rgba(255, 255, 255, 0.6); } .additional-info div { display: flex; align-items: center; } .additional-info svg { width: 16px; height: 16px; margin-right: 5px; fill: rgba(255, 255, 255, 0.6); } .volume-container { display: flex; align-items: center; margin-top: 15px; } .volume-icon { margin-right: 10px; color: rgba(255, 255, 255, 0.7); } .volume-slider { flex: 1; height: 5px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; position: relative; cursor: pointer; } .volume-level { height: 100%; width: 70%; background: linear-gradient(90deg, #4776e6, #8a2be2); border-radius: 3px; } .playlist-hint { margin-top: 25px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.5); } .playlist-hint span { color: #8a2be2; text-decoration: underline; cursor: pointer; } @media (max-width: 600px) { .player-container { padding: 20px; } .album-art { width: 150px; height: 150px; } .song-title { font-size: 20px; } .artist-name { font-size: 14px; } .play-button { width: 70px; height: 70px; } .control-btn { width: 40px; height: 40px; margin: 0 10px; } } </style> </head> <body> <div class="player-container"> <div class="album-art"></div> <div class="song-info"> <h1 class="song-title">Cosmic Rhythm</h1> <p class="artist-name">NOVA PULSE</p> </div> <div class="progress-container" id="progressContainer"> <div class="progress-bar" id="progressBar"> <div class="progress-pulse"></div> </div> </div> <div class="time-display"> <span id="currentTime">0:00</span> <span id="totalTime">3:45</span> </div> <div class="controls"> <button class="control-btn previous-btn"> <svg viewBox="0 0 24 24"> <path d="M6,18V6h2v12H6z M9.5,12l8.5,6V6L9.5,12z"/> </svg> </button> <button class="play-button" id="playButton"> <div class="pause-icon"></div> <div class="play-waves" id="playWaves"></div> </button> <button class="control-btn next-btn"> <svg viewBox="0 0 24 24"> <path d="M16,18h2V6h-2V18z M6,18l8.5-6L6,6V18z"/> </svg> </button> </div> <div class="visualizer" id="visualizer"> <!-- Bars will be added dynamically --> </div> <div class="volume-container"> <div class="volume-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="rgba(255, 255, 255, 0.7)"> <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/> </svg> </div> <div class="volume-slider"> <div class="volume-level" id="volumeLevel"></div> </div> </div> <div class="additional-info"> <div> <svg viewBox="0 0 24 24"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> 10.2K </div> <div> <svg viewBox="0 0 24 24"> <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/> </svg> Share </div> <div> <svg viewBox="0 0 24 24"> <path d="M14 10H2v2h12v-2zm0-4H2v2h12V6zm4 8v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM2 16h8v-2H2v2z"/> </svg> Add </div> </div> <div class="playlist-hint"> Listen to <span>Deep Electronica</span> playlist for more like this </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const playButton = document.getElementById('playButton'); const progressBar = document.getElementById('progressBar'); const progressContainer = document.getElementById('progressContainer'); const currentTimeEl = document.getElementById('currentTime'); const totalTimeEl = document.getElementById('totalTime'); const visualizer = document.getElementById('visualizer'); const playWaves = document.getElementById('playWaves'); const volumeLevel = document.getElementById('volumeLevel'); let isPlaying = false; let progressInterval; let currentProgress = 0; let waveAnimations = []; // Create visualizer bars for (let i = 0; i < 30; i++) { const bar = document.createElement('div'); bar.className = 'bar'; visualizer.appendChild(bar); } const bars = document.querySelectorAll('.bar'); // Create wave animations for play button for (let i = 0; i < 3; i++) { const wave = document.createElement('div'); wave.className = 'wave'; wave.style.width = `${100 + i * 30}%`; wave.style.height = `${100 + i * 30}%`; playWaves.appendChild(wave); waveAnimations.push(wave); } function formatTime(seconds) { const mins = Math.floor(seconds / 60); const secs = Math.floor(seconds % 60); return `${mins}:${secs < 10 ? '0' : ''}${secs}`; } function updateProgress() { if (currentProgress >= 225) { // Song ends after 3:45 (225 seconds) stopPlayback(); return; } currentProgress += 0.1; const percentage = (currentProgress / 225) * 100; progressBar.style.width = `${percentage}%`; currentTimeEl.textContent = formatTime(currentProgress); } function animateVisualizer() { bars.forEach(bar => { const height = isPlaying ? Math.floor(Math.random() * 45) + 5 : 5; bar.style.height = `${height}px`; }); } function startWaveAnimation() { waveAnimations.forEach((wave, index) => { wave.style.animation = `ripple ${2 + index * 0.5}s linear infinite`; wave.style.animationDelay = `${index * 0.5}s`; }); } function stopWaveAnimation() { waveAnimations.forEach(wave => { wave.style.animation = 'none'; }); } function startPlayback() { isPlaying = true; playButton.classList.add('playing'); progressInterval = setInterval(updateProgress, 100); // Start visualizer animation interval if (!visualizerInterval) { visualizerInterval = setInterval(animateVisualizer, 100); } startWaveAnimation(); // Play button ripple effect const ripple = document.createElement('div'); ripple.className = 'play-button-ripple'; playButton.appendChild(ripple); // Trigger animation ripple.style.animation = 'ripple 0.8s linear'; // Remove after animation completes setTimeout(() => { ripple.remove(); }, 800); } function stopPlayback() { isPlaying = false; playButton.classList.remove('playing'); clearInterval(progressInterval); stopWaveAnimation(); // Don't clear visualizer interval to keep minimal animation animateVisualizer(); } let visualizerInterval = setInterval(animateVisualizer, 100); playButton.addEventListener('click', () => { if (isPlaying) { stopPlayback(); } else { startPlayback(); } }); progressContainer.addEventListener('click', (e) => { const width = progressContainer.clientWidth; const clickX = e.offsetX; const percentage = clickX / width; currentProgress = percentage * 225; // 3:45 in seconds progressBar.style.width = `${percentage * 100}%`; currentTimeEl.textContent = formatTime(currentProgress); if (isPlaying) { clearInterval(progressInterval); progressInterval = setInterval(updateProgress, 100); } }); // Volume slider functionality const volumeSlider = document.querySelector('.volume-slider'); volumeSlider.addEventListener('click', (e) => { const width = volumeSlider.clientWidth; const clickX = e.offsetX; const percentage = clickX / width; volumeLevel.style.width = `${percentage * 100}%`; }); // Add hover pulse effect to album art const albumArt = document.querySelector('.album-art'); albumArt.addEventListener('mouseenter', () => { albumArt.style.animation = 'pulse 2s infinite'; }); albumArt.addEventListener('mouseleave', () => { albumArt.style.animation = 'none'; }); // Initialize totalTimeEl.textContent = formatTime(225); // 3:45 animateVisualizer(); }); </script> </body> </html>
