Buttons are a fundamental part of any user interface, and the right click effect can make all the difference in user experience. From subtle animations to bold transformations, button click effects can enhance the interactivity and visual appeal of your design.
In this article, we will explore 10 button click effect examples that can elevate your UI. Whether you're looking for inspiration or practical solutions, these examples will help you create engaging and responsive buttons for 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 love Subframe for its drag-and-drop interface and intuitive, responsive canvas. Create pixel-perfect button click effects effortlessly, ensuring your UI stands out every time.
Join the community of satisfied users and elevate your design game. 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
Ready to elevate your UI design game? With Subframe, you can create pixel-perfect button click effects and stunning interfaces in minutes. Our drag-and-drop editor ensures efficiency and precision.
Don't wait—start creating beautiful, responsive UIs right away. 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', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 700px; background-color: #f9f9f9; background-image: linear-gradient(135deg, #f0f4f8 25%, transparent 25%), linear-gradient(225deg, #f0f4f8 25%, transparent 25%), linear-gradient(45deg, #f0f4f8 25%, transparent 25%), linear-gradient(315deg, #f0f4f8 25%, #f9f9f9 25%); background-position: 10px 0, 10px 0, 0 0, 0 0; background-size: 20px 20px; background-repeat: repeat; } .checkout-container { width: 90%; max-width: 500px; background-color: white; padding: 30px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; } .order-summary { margin-bottom: 30px; } .summary-title { font-size: 22px; color: #333; margin-bottom: 20px; font-weight: 600; } .item-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 15px; color: #555; } .total-row { display: flex; justify-content: space-between; margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; font-weight: 600; font-size: 18px; color: #333; } .checkout-button-container { position: relative; margin-top: 30px; text-align: center; } .checkout-button { width: 100%; padding: 16px 24px; background: linear-gradient(135deg, #4f39fa, #da62c4); color: white; border: none; border-radius: 8px; font-size: 18px; font-weight: 600; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; overflow: hidden; letter-spacing: 0.5px; box-shadow: 0 4px 15px rgba(218, 98, 196, 0.3); } .checkout-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(218, 98, 196, 0.4); } .checkout-button:active { transform: translateY(1px); } .checkout-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); transform: translateY(-100%); transition: transform 0.3s ease; } .checkout-button:hover::before { transform: translateY(0); } .pulse-effect { position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); } .success-message { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 10; border-radius: 16px; } .success-icon { width: 70px; height: 70px; border-radius: 50%; background-color: #32cc78; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; transform: scale(0); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s; } .success-icon svg { width: 40px; fill: white; } .success-text { font-size: 22px; font-weight: 600; color: #333; margin-bottom: 10px; opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s; } .success-subtext { font-size: 16px; color: #666; text-align: center; max-width: 80%; opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s; } .success-message.show { opacity: 1; pointer-events: auto; } .success-message.show .success-icon { transform: scale(1); } .success-message.show .success-text, .success-message.show .success-subtext { opacity: 1; transform: translateY(0); } .new-order-button { margin-top: 25px; padding: 12px 24px; background: linear-gradient(135deg, #4f39fa, #da62c4); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; letter-spacing: 0.5px; box-shadow: 0 4px 15px rgba(218, 98, 196, 0.3); opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease 0.4s, transform 0.3s ease 0.4s; } .success-message.show .new-order-button { opacity: 1; transform: translateY(0); } .secure-badge { display: flex; align-items: center; justify-content: center; margin-top: 15px; font-size: 14px; color: #777; } .secure-badge svg { width: 16px; margin-right: 6px; fill: #777; } /* Responsive adjustments */ @media (max-width: 500px) { .checkout-container { padding: 20px; } .summary-title { font-size: 20px; } .item-row, .total-row { font-size: 14px; } .checkout-button { padding: 14px 20px; font-size: 16px; } .success-text { font-size: 20px; } .success-subtext { font-size: 14px; } } </style> </head> <body> <div class="checkout-container"> <div class="order-summary"> <h2 class="summary-title">Order Summary</h2> <div class="item-row"> <span>Premium Noise-Cancelling Headphones</span> <span>$249.99</span> </div> <div class="item-row"> <span>Protective Travel Case</span> <span>$29.99</span> </div> <div class="item-row"> <span>Extended 2-Year Warranty</span> <span>$39.99</span> </div> <div class="item-row"> <span>Shipping</span> <span>Free</span> </div> <div class="total-row"> <span>Total</span> <span>$319.97</span> </div> </div> <div class="checkout-button-container"> <button id="checkoutButton" class="checkout-button"> Complete Purchase </button> <div class="pulse-effect" id="pulseEffect"></div> <div class="secure-badge"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 6c1.4 0 2.8 1.1 2.8 2.5V11c.6 0 1.2.6 1.2 1.3v3.5c0 .6-.6 1.2-1.3 1.2H9.2c-.6 0-1.2-.6-1.2-1.3v-3.5c0-.6.6-1.2 1.2-1.2V9.5C9.2 8.1 10.6 7 12 7zm0 1.2c-.8 0-1.5.7-1.5 1.5V11h3V9.7c0-.8-.7-1.5-1.5-1.5z"/> </svg> <span>Secure Transaction</span> </div> </div> <div class="success-message" id="successMessage"> <div class="success-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/> </svg> </div> <div class="success-text">Purchase Successful!</div> <div class="success-subtext">Your premium audio experience is on its way to you. You'll receive a confirmation email shortly.</div> <button class="new-order-button" id="newOrderButton">Start New Order</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const checkoutButton = document.getElementById('checkoutButton'); const pulseEffect = document.getElementById('pulseEffect'); const successMessage = document.getElementById('successMessage'); const newOrderButton = document.getElementById('newOrderButton'); checkoutButton.addEventListener('click', function(e) { // Create the pulse effect pulseEffect.style.width = '0'; pulseEffect.style.height = '0'; pulseEffect.style.opacity = '1'; // Animate the pulse pulseEffect.animate([ { width: '0', height: '0', opacity: '1' }, { width: '300px', height: '300px', opacity: '0' } ], { duration: 700, easing: 'ease-out' }); // Add glow effect to the button checkoutButton.animate([ { boxShadow: '0 4px 15px rgba(218, 98, 196, 0.3)' }, { boxShadow: '0 0 30px rgba(218, 98, 196, 0.8)' }, { boxShadow: '0 4px 15px rgba(218, 98, 196, 0.3)' } ], { duration: 800, easing: 'ease-out' }); // Show success message after a short delay setTimeout(() => { successMessage.classList.add('show'); }, 800); }); newOrderButton.addEventListener('click', function() { successMessage.classList.remove('show'); }); }); </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 { display: flex; justify-content: center; align-items: center; height: 100vh; background: #f7f9fc; background-image: radial-gradient(#e1e8f5 1px, transparent 1px); background-size: 20px 20px; } .banking-app { width: 350px; background: white; border-radius: 24px; box-shadow: 0 20px 60px rgba(0, 33, 93, 0.1); padding: 2rem; position: relative; overflow: hidden; } .header { margin-bottom: 1.5rem; } .header h1 { font-size: 1.5rem; color: #153e75; margin-bottom: 0.5rem; font-weight: 600; } .header p { color: #5a7099; font-size: 0.9rem; line-height: 1.4; } .transaction-details { background: #f5f8ff; padding: 1.2rem; border-radius: 16px; margin-bottom: 1.5rem; } .transaction-item { display: flex; justify-content: space-between; margin-bottom: 0.8rem; } .transaction-item:last-child { margin-bottom: 0; padding-top: 0.8rem; border-top: 1px dashed #d0ddf1; font-weight: 600; } .transaction-label { color: #5a7099; font-size: 0.9rem; } .transaction-value { color: #153e75; font-size: 0.9rem; } .security-info { display: flex; align-items: center; background: #eef6ff; padding: 0.8rem 1rem; border-radius: 12px; margin-bottom: 1.5rem; border-left: 4px solid #4285f4; } .security-icon { color: #4285f4; margin-right: 0.8rem; font-size: 1.2rem; } .security-text { color: #4285f4; font-size: 0.85rem; line-height: 1.4; } .action-button { position: relative; width: 100%; padding: 1rem 0; font-size: 1rem; font-weight: 600; color: white; background: #2069e0; border: none; border-radius: 12px; cursor: pointer; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 12px rgba(32, 105, 224, 0.2); outline: none; } .action-button:hover { background: #1b5bc7; box-shadow: 0 6px 16px rgba(32, 105, 224, 0.3); transform: translateY(-2px); } .action-button:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(32, 105, 224, 0.2); } .action-button.disabled { background: #a5b9db; cursor: not-allowed; transform: none; box-shadow: none; } .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transform: scale(0); animation: ripple 0.8s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(3); opacity: 0; } } .button-text { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; } .button-icon { margin-right: 0.5rem; } .secure-badge { position: absolute; bottom: -10px; right: -10px; background: #e7f0ff; padding: 0.4rem 0.8rem; border-radius: 8px; font-size: 0.7rem; color: #2069e0; font-weight: 600; box-shadow: 0 2px 8px rgba(32, 105, 224, 0.15); opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; } .banking-app:hover .secure-badge { opacity: 1; transform: translateY(0); } .toggle-container { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #eef1f7; } .toggle-label { color: #5a7099; font-size: 0.9rem; } .toggle-switch { position: relative; width: 50px; height: 24px; } .toggle-input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #d0ddf1; transition: .4s; border-radius: 24px; } .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; } .toggle-input:checked + .toggle-slider { background-color: #2069e0; } .toggle-input:checked + .toggle-slider:before { transform: translateX(26px); } .pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: transparent; border-radius: 12px; box-shadow: 0 0 0 0 rgba(32, 105, 224, 0.5); } .action-button:not(.disabled):hover .pulse { animation: pulse 1.5s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(32, 105, 224, 0.5); } 70% { box-shadow: 0 0 0 10px rgba(32, 105, 224, 0); } 100% { box-shadow: 0 0 0 0 rgba(32, 105, 224, 0); } } .biometric-icon { font-size: 1.2rem; margin-left: 0.5rem; transition: transform 0.3s ease; } .action-button:not(.disabled):hover .biometric-icon { transform: scale(1.1); } @media (max-width: 400px) { .banking-app { width: 90%; padding: 1.5rem; } } </style> </head> <body> <div class="banking-app"> <div class="header"> <h1>Confirm Transfer</h1> <p>Please review the details before authorizing this secure transaction.</p> </div> <div class="transaction-details"> <div class="transaction-item"> <span class="transaction-label">Recipient</span> <span class="transaction-value">James Wilson</span> </div> <div class="transaction-item"> <span class="transaction-label">Account</span> <span class="transaction-value">••••8742</span> </div> <div class="transaction-item"> <span class="transaction-label">Date</span> <span class="transaction-value">Today</span> </div> <div class="transaction-item"> <span class="transaction-label">Amount</span> <span class="transaction-value">$750.00</span> </div> </div> <div class="security-info"> <div class="security-icon">🔒</div> <div class="security-text">This transaction is protected by VeriShield™ and will be processed using secure encryption.</div> </div> <button id="actionButton" class="action-button"> <div class="pulse"></div> <span class="button-text"> <span class="button-icon">✓</span> Authorize Transfer <span class="biometric-icon">👆</span> </span> </button> <div class="toggle-container"> <span class="toggle-label">Enable biometric verification</span> <label class="toggle-switch"> <input type="checkbox" checked class="toggle-input" id="biometricToggle"> <span class="toggle-slider"></span> </label> </div> <div class="secure-badge">Bank-grade Security</div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const actionButton = document.getElementById('actionButton'); const biometricToggle = document.getElementById('biometricToggle'); // Handle ripple effect actionButton.addEventListener('click', function(e) { if (this.classList.contains('disabled')) return; const ripple = document.createElement('span'); ripple.classList.add('ripple'); this.appendChild(ripple); const rect = this.getBoundingClientRect(); const size = Math.max(rect.width, rect.height) * 2; ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${e.clientX - rect.left - size/2}px`; ripple.style.top = `${e.clientY - rect.top - size/2}px`; // Change button text and show success state showProcessingState(); // Remove ripple after animation completes setTimeout(() => { ripple.remove(); }, 800); }); // Handle biometric toggle biometricToggle.addEventListener('change', function() { if (this.checked) { actionButton.classList.remove('disabled'); actionButton.removeAttribute('disabled'); actionButton.querySelector('.button-text').innerHTML = '<span class="button-icon">✓</span>Authorize Transfer<span class="biometric-icon">👆</span>'; } else { actionButton.classList.add('disabled'); actionButton.setAttribute('disabled', true); actionButton.querySelector('.button-text').innerHTML = '<span class="button-icon">✓</span>Enable Biometric Auth'; } }); function showProcessingState() { // Show processing state const buttonText = actionButton.querySelector('.button-text'); buttonText.innerHTML = '<span class="button-icon">⏳</span>Processing...'; actionButton.classList.add('disabled'); actionButton.setAttribute('disabled', true); // After 1.5 seconds, show success state setTimeout(() => { buttonText.innerHTML = '<span class="button-icon">✅</span>Transfer Authorized'; // Reset button after 3 seconds setTimeout(() => { if (biometricToggle.checked) { actionButton.classList.remove('disabled'); actionButton.removeAttribute('disabled'); buttonText.innerHTML = '<span class="button-icon">✓</span>Authorize Transfer<span class="biometric-icon">👆</span>'; } else { buttonText.innerHTML = '<span class="button-icon">✓</span>Enable Biometric Auth'; } }, 3000); }, 1500); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Health Tracker Start Button</title> <style> :root { --primary-green: #4CAF50; --light-green: #8BC34A; --dark-green: #2E7D32; --pale-green: #E8F5E9; --white: #FFFFFF; } * { 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; height: 100vh; background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%); overflow: hidden; } .container { width: 90%; max-width: 650px; background: var(--white); padding: 2rem; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); text-align: center; position: relative; overflow: hidden; } .leaf-pattern { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; opacity: 0.05; pointer-events: none; } .title { font-size: 2rem; color: var(--dark-green); margin-bottom: 1rem; position: relative; z-index: 1; } .subtitle { font-size: 1.1rem; color: #666; margin-bottom: 2.5rem; line-height: 1.6; position: relative; z-index: 1; } .button-container { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; margin-bottom: 2rem; } .start-button { background: var(--primary-green); color: var(--white); border: none; border-radius: 50px; font-size: 1.2rem; font-weight: 600; padding: 1.2rem 2.5rem; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3); outline: none; } .start-button:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4); background: var(--light-green); } .start-button:active { transform: translateY(2px); box-shadow: 0 2px 10px rgba(76, 175, 80, 0.3); } .button-shadow { position: absolute; width: 100%; height: 20px; background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 70%); bottom: -20px; left: 0; border-radius: 50%; transform: scaleX(0.7); transition: all 0.3s ease; opacity: 0.7; } .pulse-ring { position: absolute; width: 100%; height: 100%; border-radius: 50px; background: var(--primary-green); opacity: 0; transform: scale(1); } .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1rem; position: relative; z-index: 1; } .feature { background: var(--pale-green); padding: 1.2rem 1rem; border-radius: 12px; display: flex; flex-direction: column; align-items: center; transition: all 0.3s ease; } .feature:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.08); } .feature-icon { font-size: 2rem; margin-bottom: 0.7rem; color: var(--primary-green); } .feature-title { font-weight: 600; font-size: 1rem; color: var(--dark-green); margin-bottom: 0.3rem; } .feature-desc { font-size: 0.85rem; color: #666; line-height: 1.4; } .status-indicator { display: flex; justify-content: center; align-items: center; margin-top: 2rem; opacity: 0; transition: all 0.5s ease; position: relative; z-index: 1; } .status-dot { width: 8px; height: 8px; background-color: var(--primary-green); border-radius: 50%; margin: 0 5px; } .status-text { color: var(--dark-green); font-size: 1rem; font-weight: 500; margin-left: 10px; } @media (max-width: 600px) { .container { padding: 1.5rem; } .title { font-size: 1.6rem; } .subtitle { font-size: 1rem; margin-bottom: 2rem; } .start-button { font-size: 1.1rem; padding: 1rem 2rem; } .features { grid-template-columns: 1fr; } } /* Animation keyframes */ @keyframes pulse { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes statusDotPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } </style> </head> <body> <div class="container"> <div class="leaf-pattern"></div> <h1 class="title">VitaTrack Health Monitor</h1> <p class="subtitle">Ready to transform your daily wellness routine? Activate your personalized health tracking journey with a single tap.</p> <div class="button-container"> <button id="startButton" class="start-button">Begin Health Journey</button> <div class="button-shadow"></div> </div> <div class="status-indicator" id="statusIndicator"> <div class="status-dot"></div> <div class="status-dot"></div> <div class="status-dot"></div> <span class="status-text">Activating your health profile...</span> </div> <div class="features"> <div class="feature"> <div class="feature-icon">💓</div> <h3 class="feature-title">Heart Rate</h3> <p class="feature-desc">Monitor cardiac rhythms with precision biometric sensors.</p> </div> <div class="feature"> <div class="feature-icon">🏃</div> <h3 class="feature-title">Activity Metrics</h3> <p class="feature-desc">Track steps, distance, and calorie expenditure.</p> </div> <div class="feature"> <div class="feature-icon">😴</div> <h3 class="feature-title">Sleep Patterns</h3> <p class="feature-desc">Analyze sleep cycles and improve rest quality.</p> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const startButton = document.getElementById('startButton'); const buttonShadow = document.querySelector('.button-shadow'); const statusIndicator = document.getElementById('statusIndicator'); const container = document.querySelector('.container'); const statusDots = document.querySelectorAll('.status-dot'); // Create leaf pattern const leafPattern = document.querySelector('.leaf-pattern'); createLeafPattern(leafPattern); startButton.addEventListener('mouseenter', function() { buttonShadow.style.transform = 'scaleX(0.9)'; }); startButton.addEventListener('mouseleave', function() { buttonShadow.style.transform = 'scaleX(0.7)'; }); startButton.addEventListener('click', function() { // Button animation startButton.style.animation = 'bounce 0.5s ease'; startButton.style.background = 'linear-gradient(90deg, var(--light-green), var(--primary-green), var(--dark-green))'; startButton.style.backgroundSize = '200% 100%'; startButton.style.animation = 'gradientShift 2s ease infinite, bounce 0.5s ease'; // Shadow animation buttonShadow.style.transform = 'scaleX(1)'; buttonShadow.style.opacity = '1'; // Create and animate pulse effect const pulseRing = document.createElement('div'); pulseRing.classList.add('pulse-ring'); startButton.appendChild(pulseRing); pulseRing.style.animation = 'pulse 1s ease-out'; setTimeout(() => { pulseRing.remove(); }, 1000); // Show status indicator statusIndicator.style.opacity = '1'; // Animate status dots statusDots.forEach((dot, index) => { dot.style.animation = `statusDotPulse 1s ease-in-out ${index * 0.2}s infinite`; }); // Change button text after delay setTimeout(() => { startButton.innerText = "Tracking Active"; startButton.style.background = var(--dark-green); statusIndicator.style.opacity = '0'; // Stop dot animations statusDots.forEach(dot => { dot.style.animation = 'none'; }); // Enable features const features = document.querySelectorAll('.feature'); features.forEach((feature, index) => { setTimeout(() => { feature.style.transform = 'translateY(-5px)'; feature.style.boxShadow = '0 5px 15px rgba(0,0,0,0.08)'; }, index * 200); }); }, 3000); }); startButton.addEventListener('animationend', function() { if (startButton.innerText !== "Tracking Active") { startButton.style.animation = 'gradientShift 2s ease infinite'; } }); function createLeafPattern(container) { const leafColors = ['#4CAF50', '#8BC34A', '#CDDC39']; const leafCount = 30; for (let i = 0; i < leafCount; i++) { const leaf = document.createElement('div'); const size = Math.random() * 20 + 10; const x = Math.random() * 100; const y = Math.random() * 100; const rotation = Math.random() * 360; const color = leafColors[Math.floor(Math.random() * leafColors.length)]; leaf.style.position = 'absolute'; leaf.style.width = `${size}px`; leaf.style.height = `${size}px`; leaf.style.left = `${x}%`; leaf.style.top = `${y}%`; leaf.style.backgroundColor = color; leaf.style.maskImage = 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z\'/%3E%3C/svg%3E")'; leaf.style.webkitMaskImage = 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z\'/%3E%3C/svg%3E")'; leaf.style.maskSize = 'contain'; leaf.style.webkitMaskSize = 'contain'; leaf.style.maskRepeat = 'no-repeat'; leaf.style.webkitMaskRepeat = 'no-repeat'; leaf.style.transform = `rotate(${rotation}deg)`; container.appendChild(leaf); } } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gaming Portal Action Button</title> <style> :root { --primary: #ff4e50; --secondary: #2e24fc; --accent: #00ffcc; --dark: #1a1a2e; --light: #f8f8f8; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', 'Orbitron', sans-serif; } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: var(--dark); background-image: radial-gradient(circle at 20% 20%, rgba(46, 36, 252, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 78, 80, 0.05) 0%, transparent 50%); overflow: hidden; } .container { width: 100%; max-width: 700px; height: 100%; max-height: 700px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; } .title { color: var(--light); font-size: 2.5rem; margin-bottom: 1rem; text-align: center; text-transform: uppercase; letter-spacing: 2px; line-height: 1.2; position: relative; text-shadow: 0 0 10px rgba(0, 255, 204, 0.3); } .subtitle { color: var(--accent); font-size: 1.2rem; margin-bottom: 3rem; text-align: center; max-width: 80%; opacity: 0.8; } .button-wrapper { position: relative; perspective: 1000px; margin-bottom: 2rem; } .action-button { position: relative; padding: 1.2rem 2.5rem; font-size: 1.5rem; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; color: var(--light); background: linear-gradient(135deg, var(--primary), var(--secondary)); border: none; border-radius: 8px; cursor: pointer; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 0 20px rgba(255, 78, 80, 0.5), 0 0 30px rgba(0, 255, 204, 0.2); z-index: 2; -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip: text; text-shadow: 0 0 2px rgba(255, 255, 255, 0.5); } .action-button::before { content: "ENTER BATTLE"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: initial; -webkit-text-fill-color: var(--light); z-index: -1; } .action-button::after { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) ); transform: rotate(30deg); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .action-button:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 0 30px rgba(255, 78, 80, 0.7), 0 0 50px rgba(0, 255, 204, 0.3); } .action-button:hover::after { opacity: 0.5; animation: shine 1.5s infinite; } .particles-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .particle { position: absolute; background: var(--accent); border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; } .features { display: flex; justify-content: space-around; width: 100%; margin-top: 1rem; } .feature { display: flex; flex-direction: column; align-items: center; color: var(--light); text-align: center; width: 30%; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .feature.visible { opacity: 1; transform: translateY(0); } .feature-icon { font-size: 2rem; margin-bottom: 0.5rem; color: var(--accent); } .feature-title { font-size: 1rem; font-weight: bold; margin-bottom: 0.5rem; color: var(--primary); } .feature-desc { font-size: 0.9rem; opacity: 0.8; } .button-glow { position: absolute; width: 100%; height: 100%; border-radius: 8px; background: transparent; box-shadow: 0 0 20px var(--accent); opacity: 0; z-index: 0; animation: pulse 2s infinite; } @keyframes shine { 0% { opacity: 0.5; top: -50%; left: -50%; } 100% { opacity: 0; top: 50%; left: 50%; } } @keyframes pulse { 0% { opacity: 0.1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(1.05); } 100% { opacity: 0.1; transform: scale(1); } } @media (max-width: 600px) { .title { font-size: 2rem; } .subtitle { font-size: 1rem; margin-bottom: 2rem; } .action-button { padding: 1rem 2rem; font-size: 1.2rem; } .features { flex-direction: column; align-items: center; } .feature { width: 100%; margin-bottom: 1.5rem; } } </style> </head> <body> <div class="container"> <h1 class="title">Nexus Battlefield</h1> <p class="subtitle">Ready your weapons, forge your destiny, and join 50,000+ warriors in the ultimate gaming arena</p> <div class="button-wrapper"> <div class="button-glow"></div> <button class="action-button">ENTER BATTLE</button> <div class="particles-container"></div> </div> <div class="features"> <div class="feature"> <div class="feature-icon">⚔️</div> <div class="feature-title">EPIC BATTLES</div> <div class="feature-desc">Engage in 100-player PvP matches with destructible environments</div> </div> <div class="feature"> <div class="feature-icon">🏆</div> <div class="feature-title">RANKED LEAGUES</div> <div class="feature-desc">Climb the global leaderboards with seasonal tournaments</div> </div> <div class="feature"> <div class="feature-icon">🎮</div> <div class="feature-title">CROSS-PLATFORM</div> <div class="feature-desc">Seamless gameplay across PC, console, and mobile devices</div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const button = document.querySelector('.action-button'); const particlesContainer = document.querySelector('.particles-container'); const features = document.querySelectorAll('.feature'); // Show features with delay setTimeout(() => { features.forEach((feature, index) => { setTimeout(() => { feature.classList.add('visible'); }, index * 200); }); }, 500); // Generate particles on button click button.addEventListener('click', function(e) { // Create particles createParticles(e); // Add click effect button.style.transform = 'scale(0.95)'; setTimeout(() => { button.style.transform = ''; }, 150); // Add glowing effect const glow = document.querySelector('.button-glow'); glow.style.opacity = '1'; glow.style.animation = 'none'; setTimeout(() => { glow.style.animation = 'pulse 2s infinite'; }, 10); }); function createParticles(e) { // Get button position relative to viewport const rect = button.getBoundingClientRect(); const btnCenterX = rect.left + rect.width / 2; const btnCenterY = rect.top + rect.height / 2; // Clear existing particles particlesContainer.innerHTML = ''; // Create new particles const particleCount = 50; const colors = [ '#ff4e50', // primary '#2e24fc', // secondary '#00ffcc', // accent '#ffffff' // white ]; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); // Random properties const size = Math.random() * 10 + 5; const color = colors[Math.floor(Math.random() * colors.length)]; const angle = Math.random() * Math.PI * 2; // Random angle in radians const velocity = Math.random() * 10 + 5; const distance = Math.random() * 150 + 50; const duration = Math.random() * 0.5 + 0.5; // 0.5 to 1 seconds // Set initial styles particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.backgroundColor = color; particle.style.left = `${btnCenterX}px`; particle.style.top = `${btnCenterY}px`; // Add to container particlesContainer.appendChild(particle); // Animate particle const destinationX = btnCenterX + Math.cos(angle) * distance; const destinationY = btnCenterY + Math.sin(angle) * distance; // Use Web Animation API for smoother performance particle.animate([ { transform: 'translate(-50%, -50%) scale(0)', opacity: 0 }, { transform: 'translate(-50%, -50%) scale(1)', opacity: 1, offset: 0.2 }, { transform: `translate(calc(${destinationX}px - 50%), calc(${destinationY}px - 50%)) scale(0)`, opacity: 0 } ], { duration: duration * 1000, easing: 'cubic-bezier(0.22, 0.61, 0.36, 1)', fill: 'forwards' }); } } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>News Platform Read More Button</title> <style> :root { --primary: #1c3e6b; --primary-light: #2754a0; --secondary: #f8f9fa; --accent: #e74c3c; --text: #333333; --light-gray: #e0e0e0; --transition-speed: 0.3s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: #f0f2f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .container { width: 100%; max-width: 650px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transition: transform var(--transition-speed); } .container:hover { transform: translateY(-5px); } .article-image { width: 100%; height: 220px; object-fit: cover; border-bottom: 3px solid var(--primary); } .article-content { padding: 24px; position: relative; } .article-category { display: inline-block; padding: 5px 10px; background: var(--primary); color: white; font-size: 12px; font-weight: 600; border-radius: 100px; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 12px; } .article-title { font-size: 24px; font-weight: 700; color: var(--text); margin-bottom: 14px; line-height: 1.3; } .article-meta { display: flex; align-items: center; margin-bottom: 16px; font-size: 14px; color: #666; } .article-author { font-weight: 600; margin-right: 15px; } .article-date::before { content: "•"; margin-right: 15px; } .article-excerpt { font-size: 15px; line-height: 1.6; color: #555; margin-bottom: 25px; position: relative; } .read-more-container { display: flex; align-items: center; } .read-more-btn { background-color: var(--secondary); color: var(--primary); border: 2px solid var(--primary); border-radius: 8px; padding: 10px 18px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color 0.2s, color 0.2s, transform 0.1s, box-shadow 0.3s; position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; } .read-more-btn:hover { background-color: rgba(28, 62, 107, 0.05); box-shadow: 0 5px 15px rgba(28, 62, 107, 0.15); } .read-more-btn:active { transform: scale(0.98); } .read-more-btn::after { content: ""; position: absolute; width: 10px; height: 10px; background: rgba(255, 255, 255, 0.6); border-radius: 50%; opacity: 0; transform: scale(0); } .read-more-btn.clicked { background-color: var(--primary); color: var(--secondary); } .read-more-btn .icon { transition: transform 0.3s; } .read-more-btn:hover .icon { transform: translateX(4px); } .read-time { margin-left: 15px; font-size: 14px; color: #888; display: flex; align-items: center; } .read-time::before { content: ""; display: inline-block; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); background-size: contain; margin-right: 5px; } .expanded-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-out; opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s, max-height 0.5s ease-out; } .expanded-content.active { max-height: 800px; opacity: 1; transform: translateY(0); } .expanded-content p { margin-top: 20px; line-height: 1.7; color: #444; font-size: 15px; } .expanded-content blockquote { border-left: 3px solid var(--primary); padding-left: 15px; margin: 20px 0; font-style: italic; color: #555; } .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); transform: scale(0); animation: ripple 0.6s ease-out; } @keyframes ripple { to { transform: scale(4); opacity: 0; } } @media (max-width: 500px) { .article-title { font-size: 20px; } .article-content { padding: 20px; } .read-time { display: none; } .article-image { height: 180px; } } </style> </head> <body> <div class="container"> <img class="article-image" src="https://images.unsplash.com/photo-1585829365295-ab7cd400c167?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Climate Change Impact"> <div class="article-content"> <span class="article-category">Climate</span> <h2 class="article-title">Rising Seas: How Coastal Cities Are Adapting to Climate Change</h2> <div class="article-meta"> <span class="article-author">By Emma Clarke</span> <span class="article-date">May 19, 2023</span> </div> <div class="article-excerpt"> As sea levels continue to rise at an accelerating rate, coastal cities around the world are implementing innovative strategies to protect their infrastructure and communities. From Amsterdam's floating neighborhoods to Miami's raised roads, urban planners are reimagining how we live with water. </div> <div class="read-more-container"> <button class="read-more-btn"> Read More <span class="icon">→</span> </button> <span class="read-time">4 min read</span> </div> <div class="expanded-content"> <p>According to the latest IPCC report, global sea levels are projected to rise between 0.3 and 1.1 meters by 2100, depending on emissions scenarios. For the 570 million people living in coastal zones, this isn't a distant threat—it's a present reality.</p> <p>Venice, Italy has been battling rising waters for decades. Its MOSE flood barrier system, consisting of 78 mobile gates that rise from the seafloor, represents one of the most ambitious engineering projects designed to protect a historic city.</p> <blockquote> "We're not just building for today's sea levels, but for what we expect to see in 50 years. This requires forecasting and flexibility that traditional infrastructure lacks," explains Dr. James Wong, urban resilience expert at the University of California. </blockquote> <p>In the Netherlands, where nearly a third of the country lies below sea level, urban planners have embraced a philosophy of "living with water" rather than fighting against it. Rotterdam's water squares serve as recreational spaces during dry weather but transform into water retention basins during heavy rainfall.</p> <p>Meanwhile, in Boston, the "Resilient Boston Harbor" plan combines elevated landscapes, restored wetlands, and flood-adaptable buildings to create multiple layers of protection while enhancing public spaces.</p> <p>As these adaptation strategies evolve, one thing becomes clear: the most successful approaches don't just engineer against nature—they work with it, creating solutions that serve multiple purposes for communities while acknowledging the inevitability of rising waters.</p> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const readMoreBtn = document.querySelector('.read-more-btn'); const expandedContent = document.querySelector('.expanded-content'); readMoreBtn.addEventListener('click', function(e) { // Create ripple effect const button = e.currentTarget; const circle = document.createElement('span'); const diameter = Math.max(button.clientWidth, button.clientHeight); const radius = diameter / 2; circle.style.width = circle.style.height = `${diameter}px`; circle.style.left = `${e.clientX - button.getBoundingClientRect().left - radius}px`; circle.style.top = `${e.clientY - button.getBoundingClientRect().top - radius}px`; circle.classList.add('ripple'); // Remove existing ripples const ripple = button.getElementsByClassName('ripple')[0]; if (ripple) { ripple.remove(); } button.appendChild(circle); // Toggle expanded content and button text if (expandedContent.classList.contains('active')) { expandedContent.classList.remove('active'); button.classList.remove('clicked'); button.innerHTML = 'Read More <span class="icon">→</span>'; } else { expandedContent.classList.add('active'); button.classList.add('clicked'); button.innerHTML = 'Show Less <span class="icon">←</span>'; } }); // Dynamically adjust the button's color inversion readMoreBtn.addEventListener('mouseenter', function() { this.style.transition = 'background-color 0.2s, color 0.2s, transform 0.1s'; }); readMoreBtn.addEventListener('mouseleave', function() { this.style.transition = 'background-color 0.2s, color 0.2s, transform 0.1s'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Creative Portfolio Interactive Button</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f9f4ef; overflow: hidden; } .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; } .portfolio-intro { text-align: center; margin-bottom: 3rem; transition: opacity 0.5s ease; position: relative; z-index: 2; } .portfolio-intro h1 { font-size: 2.5rem; color: #2d334a; margin-bottom: 1rem; font-weight: 700; } .portfolio-intro p { font-size: 1.1rem; color: #5a5a6e; line-height: 1.6; max-width: 500px; margin: 0 auto; } .button-container { position: relative; margin-top: 1rem; z-index: 2; } .portfolio-button { position: relative; padding: 1rem 2rem; font-size: 1.1rem; font-weight: 600; background: transparent; color: #2d334a; border: none; cursor: pointer; overflow: hidden; transition: color 0.4s ease; outline: none; } .button-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #e9d8fd; transform-origin: center; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: -1; border-radius: 45% 55% 70% 30% / 30% 40% 60% 70%; } .portfolio-button:hover .button-background { transform: scale(1.05); border-radius: 60% 40% 50% 50% / 40% 50% 50% 60%; } .portfolio-button:active .button-background { transform: scale(0.98); } .portfolio-gallery { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 1rem; padding: 2rem; opacity: 0; pointer-events: none; transition: opacity 0.8s ease; z-index: 3; } .gallery-item { position: relative; overflow: hidden; border-radius: 8px; transform: translateY(30px); opacity: 0; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .gallery-item:hover img { transform: scale(1.05); } .gallery-item .overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1rem; background: rgba(255, 255, 255, 0.85); transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .gallery-item:hover .overlay { transform: translateY(0); } .overlay h3 { font-size: 1.1rem; color: #2d334a; margin-bottom: 0.3rem; } .overlay p { font-size: 0.85rem; color: #5a5a6e; } .back-button { position: absolute; top: 1rem; left: 1rem; padding: 0.5rem 1rem; background: #e9d8fd; border: none; border-radius: 50px; font-size: 0.9rem; color: #2d334a; cursor: pointer; transform: translateY(-50px); opacity: 0; transition: transform 0.5s ease, opacity 0.5s ease; z-index: 4; display: flex; align-items: center; gap: 0.5rem; } .back-button svg { width: 16px; height: 16px; } .blob-decoration { position: absolute; width: 300px; height: 300px; background: #f8e1ff; border-radius: 60% 40% 30% 70% / 40% 50% 50% 60%; filter: blur(40px); opacity: 0.5; animation: blob-move 20s infinite alternate ease-in-out; z-index: 1; } .blob-decoration:nth-child(2) { width: 250px; height: 250px; background: #d8f0ff; border-radius: 40% 60% 70% 30% / 60% 40% 30% 70%; right: -100px; bottom: -50px; animation-delay: -5s; } .blob-decoration:nth-child(3) { width: 200px; height: 200px; background: #ffe9dd; border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%; left: -80px; bottom: 20%; animation-delay: -10s; } @keyframes blob-move { 0% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(50px, -30px) rotate(20deg); } 66% { transform: translate(-20px, 40px) rotate(-10deg); } 100% { transform: translate(30px, 10px) rotate(5deg); } } .show-gallery .portfolio-intro { opacity: 0; pointer-events: none; } .show-gallery .portfolio-gallery { opacity: 1; pointer-events: all; } .show-gallery .gallery-item { transform: translateY(0); opacity: 1; } .show-gallery .back-button { transform: translateY(0); opacity: 1; } .show-gallery .gallery-item:nth-child(1) { transition-delay: 0.2s; } .show-gallery .gallery-item:nth-child(2) { transition-delay: 0.3s; } .show-gallery .gallery-item:nth-child(3) { transition-delay: 0.4s; } .show-gallery .gallery-item:nth-child(4) { transition-delay: 0.5s; } @media (max-width: 600px) { .portfolio-intro h1 { font-size: 2rem; } .portfolio-intro p { font-size: 0.95rem; } .portfolio-gallery { grid-template-columns: 1fr; grid-auto-rows: 1fr; } } @media (max-height: 700px) { .portfolio-intro { margin-bottom: 1.5rem; } .portfolio-intro h1 { font-size: 1.8rem; } .portfolio-gallery { gap: 0.75rem; padding: 1.5rem; } } </style> </head> <body> <div class="container"> <div class="blob-decoration"></div> <div class="blob-decoration"></div> <div class="blob-decoration"></div> <div class="portfolio-intro"> <h1>Handcrafted Visuals</h1> <p>A collection of meticulously designed visual narratives that breathe life into concepts through organic motion and thoughtful color interplay.</p> <div class="button-container"> <button class="portfolio-button"> <span class="button-background"></span> <span class="button-text">Explore Portfolio</span> </button> </div> </div> <div class="portfolio-gallery"> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Fluid Motion Studies"> <div class="overlay"> <h3>Fluid Motion Studies</h3> <p>Exploring organic movement through digital media</p> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Pastel Compositions"> <div class="overlay"> <h3>Pastel Compositions</h3> <p>Muted color explorations in spatial design</p> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1621075160523-b936ad96132a?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Dimensional Typography"> <div class="overlay"> <h3>Dimensional Typography</h3> <p>Form and function in textual expression</p> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1634017839464-5c339ebe3cb4?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Abstract Interfaces"> <div class="overlay"> <h3>Abstract Interfaces</h3> <p>Intuitive experiences through shapeshifting design</p> </div> </div> </div> <button class="back-button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M19 12H5M12 19l-7-7 7-7"/> </svg> Back </button> </div> <script> const container = document.querySelector('.container'); const portfolioButton = document.querySelector('.portfolio-button'); const backButton = document.querySelector('.back-button'); const buttonBackground = document.querySelector('.button-background'); // Function to morph the button background shape randomly function morphButtonBackground() { const radiusOne = Math.floor(Math.random() * 40) + 30; const radiusTwo = Math.floor(Math.random() * 40) + 30; const radiusThree = Math.floor(Math.random() * 40) + 30; const radiusFour = Math.floor(Math.random() * 40) + 30; const heightOne = Math.floor(Math.random() * 40) + 30; const heightTwo = Math.floor(Math.random() * 40) + 30; const heightThree = Math.floor(Math.random() * 40) + 30; const heightFour = Math.floor(Math.random() * 40) + 30; buttonBackground.style.borderRadius = `${radiusOne}% ${100-radiusOne}% ${radiusTwo}% ${100-radiusTwo}% / ${heightOne}% ${heightTwo}% ${100-heightTwo}% ${100-heightOne}%`; } // Start morphing animation on hover let morphInterval; portfolioButton.addEventListener('mouseenter', () => { morphInterval = setInterval(morphButtonBackground, 800); }); portfolioButton.addEventListener('mouseleave', () => { clearInterval(morphInterval); buttonBackground.style.borderRadius = '45% 55% 70% 30% / 30% 40% 60% 70%'; }); // Portfolio button click effect portfolioButton.addEventListener('click', () => { container.classList.add('show-gallery'); // Animate button expanding effect const buttonRect = portfolioButton.getBoundingClientRect(); const containerRect = container.getBoundingClientRect(); // Create and append a ripple element const ripple = document.createElement('div'); ripple.style.position = 'absolute'; ripple.style.borderRadius = '50%'; ripple.style.backgroundColor = '#e9d8fd'; ripple.style.width = '10px'; ripple.style.height = '10px'; ripple.style.top = `${buttonRect.top - containerRect.top + buttonRect.height/2}px`; ripple.style.left = `${buttonRect.left - containerRect.left + buttonRect.width/2}px`; ripple.style.transform = 'translate(-50%, -50%) scale(1)'; ripple.style.opacity = '0.5'; ripple.style.transition = 'all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)'; ripple.style.zIndex = '1'; container.appendChild(ripple); // Animate the ripple setTimeout(() => { const maxDim = Math.max(containerRect.width, containerRect.height) * 2; ripple.style.width = `${maxDim}px`; ripple.style.height = `${maxDim}px`; ripple.style.opacity = '0'; }, 10); // Remove the ripple element after animation setTimeout(() => { container.removeChild(ripple); }, 700); }); // Back button functionality backButton.addEventListener('click', () => { container.classList.remove('show-gallery'); }); // Initial random morph for button morphButtonBackground(); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SaaS Form Submit Button</title> <style> :root { --primary: #4361ee; --primary-dark: #3a56d4; --success: #06d6a0; --text: #2b2d42; --light: #f8f9fa; --border-radius: 12px; --shadow: 0 6px 15px rgba(67, 97, 238, 0.15); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #f5f7ff 0%, #f0f2fa 100%); padding: 20px; } .container { width: 100%; max-width: 650px; background-color: white; border-radius: var(--border-radius); box-shadow: var(--shadow); padding: 32px; transition: var(--transition); } h2 { color: var(--text); margin-bottom: 8px; font-weight: 700; font-size: 24px; } p { color: #565973; margin-bottom: 24px; line-height: 1.5; font-size: 15px; } .input-group { margin-bottom: 20px; } label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--text); font-size: 14px; } input, textarea, select { width: 100%; padding: 12px 16px; border: 1px solid #ddd; border-radius: var(--border-radius); font-size: 15px; transition: var(--transition); background-color: var(--light); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1); } .btn-wrapper { position: relative; overflow: hidden; width: 100%; margin-top: 30px; } .submit-btn { position: relative; width: 100%; padding: 14px 24px; background-color: var(--primary); color: white; border: none; border-radius: var(--border-radius); font-weight: 600; font-size: 16px; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; overflow: hidden; z-index: 1; box-shadow: 0 4px 12px rgba(67, 97, 238, 0.2); } .submit-btn:hover { background-color: var(--primary-dark); transform: translateY(-2px); } .submit-btn:active { transform: translateY(0); } .submit-btn .icon { margin-left: 8px; transition: var(--transition); display: inline-block; } .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); transform: scale(0); animation: ripple 0.8s linear; opacity: 0.4; } @keyframes ripple { to { transform: scale(2.5); opacity: 0; } } .progress-container { position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; background-color: rgba(255, 255, 255, 0.2); z-index: 2; overflow: hidden; border-radius: 0 0 var(--border-radius) var(--border-radius); } .progress-bar { height: 100%; width: 0; background-color: white; transition: width 0.5s ease; } .halo { position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border-radius: var(--border-radius); z-index: 0; pointer-events: none; opacity: 0; } .btn-wrapper.success .halo { border: 2px solid var(--success); opacity: 1; animation: pulse 1.5s ease-out; } @keyframes pulse { 0% { opacity: 1; transform: scale(1); } 70% { opacity: 0; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.1); } } .status-indicator { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background-color: transparent; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); opacity: 0; transition: var(--transition); } .spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 0.8s linear infinite; opacity: 0; transition: var(--transition); } @keyframes spin { to { transform: rotate(360deg); } } .btn-wrapper.loading .spinner { opacity: 1; } .btn-wrapper.success .submit-btn { background-color: var(--success); } .checkmark { display: inline-block; width: 6px; height: 12px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; transition: var(--transition); } .btn-wrapper.success .checkmark { opacity: 1; } .btn-text-container { display: flex; justify-content: center; align-items: center; position: relative; } .btn-text { transition: var(--transition); } .btn-wrapper.loading .btn-text, .btn-wrapper.success .btn-text { transform: translateX(-12px); } .demo-info { margin-top: 24px; background-color: #f5f7ff; padding: 16px; border-radius: var(--border-radius); font-size: 14px; color: #565973; border-left: 3px solid var(--primary); } .demo-info h3 { font-size: 16px; margin-bottom: 8px; color: var(--text); } @media (max-width: 600px) { .container { padding: 24px; } h2 { font-size: 20px; } .submit-btn { padding: 12px 20px; font-size: 15px; } } </style> </head> <body> <div class="container"> <h2>Ready to optimize your workflow?</h2> <p>Complete your account setup to unlock powerful analytics, team collaboration tools, and workflow automations.</p> <form id="saas-form"> <div class="input-group"> <label for="company">Company Name</label> <input type="text" id="company" placeholder="Your organization's name" required> </div> <div class="input-group"> <label for="team-size">Team Size</label> <select id="team-size" required> <option value="" selected disabled>Select your team size</option> <option value="1-10">1-10 employees</option> <option value="11-50">11-50 employees</option> <option value="51-200">51-200 employees</option> <option value="201+">201+ employees</option> </select> </div> <div class="input-group"> <label for="use-case">Primary Use Case</label> <textarea id="use-case" rows="3" placeholder="Tell us what you're looking to achieve" required></textarea> </div> <div class="btn-wrapper" id="btn-wrapper"> <button type="button" id="submit-btn" class="submit-btn"> <div class="btn-text-container"> <span class="btn-text">Complete Setup</span> <span class="icon">→</span> </div> <div class="status-indicator"> <div class="spinner"></div> <span class="checkmark"></span> </div> </button> <div class="progress-container"> <div class="progress-bar" id="progress-bar"></div> </div> <div class="halo"></div> </div> </form> <div class="demo-info"> <h3>What happens next?</h3> <p>After submission, you'll receive access to your customized dashboard along with a welcome guide from your dedicated account manager.</p> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const submitBtn = document.getElementById('submit-btn'); const btnWrapper = document.getElementById('btn-wrapper'); const progressBar = document.getElementById('progress-bar'); const form = document.getElementById('saas-form'); // Create ripple effect submitBtn.addEventListener('click', function(e) { const rect = submitBtn.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const ripple = document.createElement('span'); ripple.classList.add('ripple'); ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; submitBtn.appendChild(ripple); // Clean up ripple after animation setTimeout(() => { ripple.remove(); }, 800); // Simulate form submission if form is valid if (isFormValid()) { simulateSubmission(); } else { highlightEmptyFields(); } }); function isFormValid() { const company = document.getElementById('company').value; const teamSize = document.getElementById('team-size').value; const useCase = document.getElementById('use-case').value; return company && teamSize && useCase; } function highlightEmptyFields() { const fields = [ document.getElementById('company'), document.getElementById('team-size'), document.getElementById('use-case') ]; fields.forEach(field => { if (!field.value) { field.style.borderColor = '#ff4d6d'; field.style.boxShadow = '0 0 0 3px rgba(255, 77, 109, 0.1)'; field.addEventListener('input', function onInput() { field.style.borderColor = ''; field.style.boxShadow = ''; field.removeEventListener('input', onInput); }, { once: true }); } }); } function simulateSubmission() { // Add loading state btnWrapper.classList.add('loading'); // Animate progress bar let progress = 0; const progressInterval = setInterval(() => { progress += Math.random() * 15; if (progress >= 100) { progress = 100; clearInterval(progressInterval); // Show success state setTimeout(() => { btnWrapper.classList.remove('loading'); btnWrapper.classList.add('success'); // Reset button after some time setTimeout(() => { btnWrapper.classList.remove('success'); progressBar.style.width = '0%'; }, 3000); }, 400); } progressBar.style.width = `${progress}%`; }, 200); } // Add some subtle interaction to the form const inputs = document.querySelectorAll('input, select, textarea'); inputs.forEach(input => { input.addEventListener('focus', () => { input.parentElement.style.transform = 'translateY(-2px)'; }); input.addEventListener('blur', () => { input.parentElement.style.transform = 'translateY(0)'; }); }); // Prevent actual form submission for demo form.addEventListener('submit', (e) => { e.preventDefault(); }); }); </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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 700px; background-color: #f5f7fa; background-image: radial-gradient(#d3e0ff 1px, transparent 1px), radial-gradient(#d3e0ff 1px, transparent 1px); background-size: 20px 20px; background-position: 0 0, 10px 10px; overflow: hidden; } .container { width: 90%; max-width: 600px; background-color: white; border-radius: 20px; padding: 32px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; } h1 { font-size: 28px; font-weight: 800; margin-bottom: 16px; color: #1a2138; line-height: 1.3; } p { font-size: 16px; line-height: 1.6; color: #4f5569; margin-bottom: 32px; } .share-section { display: flex; flex-direction: column; align-items: center; position: relative; } .pulse-bg { position: absolute; width: 160px; height: 160px; border-radius: 50%; background: linear-gradient(45deg, #6e45e1, #88e0ff); opacity: 0; transform: scale(0.6); z-index: 0; } .button-wrapper { position: relative; z-index: 1; margin-bottom: 24px; } .share-button { position: relative; display: flex; align-items: center; justify-content: center; width: 150px; height: 60px; background: linear-gradient(45deg, #6e45e1, #4fa3ff); color: white; font-weight: 600; font-size: 17px; border: none; border-radius: 30px; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); overflow: hidden; box-shadow: 0 6px 15px rgba(79, 163, 255, 0.3); } .share-button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(79, 163, 255, 0.4); } .share-button:active { transform: translateY(1px); } .button-text { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; } .share-icon { width: 20px; height: 20px; fill: white; transition: transform 0.4s ease; } .share-counter { margin-top: 20px; font-size: 14px; color: #8792a8; font-weight: 500; display: flex; align-items: center; gap: 6px; } .counter { color: #6e45e1; font-weight: 700; } .social-popup { position: absolute; background: white; border-radius: 16px; padding: 20px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); display: flex; gap: 14px; top: 80px; opacity: 0; transform: translateY(20px) scale(0.9); transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; z-index: 10; } .social-popup.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; } .social-btn { width: 50px; height: 50px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; background-color: #f5f7fa; } .social-btn:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .social-btn svg { width: 24px; height: 24px; } .twitter { color: #1DA1F2; } .facebook { color: #4267B2; } .linkedin { color: #0077B5; } .pinterest { color: #E60023; } .count-animation { animation: countPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes countPop { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } } /* Responsive adjustments */ @media (max-width: 600px) { .container { padding: 24px; } h1 { font-size: 24px; } .share-button { width: 140px; height: 55px; } .social-popup { padding: 16px; gap: 10px; } .social-btn { width: 45px; height: 45px; } } /* Blob animation */ .blob { position: absolute; width: 180px; height: 180px; background: linear-gradient(45deg, rgba(110, 69, 225, 0.1), rgba(79, 163, 255, 0.1)); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform-origin: center; animation: blob-animation 15s infinite linear alternate; z-index: 0; opacity: 0.8; } .blob:nth-child(2) { width: 200px; height: 200px; right: -100px; bottom: -100px; background: linear-gradient(45deg, rgba(110, 69, 225, 0.07), rgba(79, 163, 255, 0.07)); animation-duration: 20s; animation-direction: alternate-reverse; } @keyframes blob-animation { 0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: rotate(0deg); } 25% { border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%; } 50% { border-radius: 30% 70% 70% 30% / 50% 60% 30% 60%; transform: rotate(180deg); } 75% { border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%; } 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: rotate(360deg); } } </style> </head> <body> <div class="container"> <div class="blob"></div> <div class="blob"></div> <h1>Share your ideas with the world, instantly</h1> <p>Our morphing share button adapts to your clicks and brings your content to life. Spread your creativity across platforms with a single dynamic interaction.</p> <div class="share-section"> <div class="pulse-bg" id="pulseBg"></div> <div class="button-wrapper"> <button class="share-button" id="shareButton"> <span class="button-text"> <svg class="share-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <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" fill="currentColor"/> </svg> Share </span> </button> </div> <div class="share-counter"> <span>Shared</span> <span class="counter" id="counter">248</span> <span>times</span> </div> <div class="social-popup" id="socialPopup"> <button class="social-btn twitter"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M22 5.79997C21.2483 6.12606 20.4534 6.34163 19.64 6.43997C20.4982 5.92729 21.1413 5.12075 21.45 4.16997C20.6436 4.65003 19.7608 4.98826 18.84 5.16997C18.2245 4.50254 17.405 4.05826 16.5098 3.90682C15.6147 3.75537 14.6953 3.90532 13.8938 4.33315C13.0922 4.76099 12.4515 5.4425 12.0797 6.2708C11.7078 7.09911 11.6291 8.02736 11.86 8.90997C10.3366 8.82749 8.84356 8.40288 7.47763 7.66393C6.11171 6.92498 4.90281 5.88741 3.92 4.61997C3.5724 5.25013 3.3889 5.96379 3.39 6.68997C3.38947 7.36435 3.55808 8.02858 3.88023 8.62353C4.20238 9.21848 4.66897 9.72568 5.24 10.1C4.58172 10.082 3.93695 9.89696 3.36 9.55997V9.60997C3.36122 10.5683 3.68262 11.4977 4.27234 12.2527C4.86206 13.0077 5.68212 13.5453 6.6 13.78C6.23225 13.8793 5.85205 13.9285 5.47 13.9258C5.19989 13.9304 4.93022 13.9093 4.66 13.8633C4.93618 14.6839 5.4646 15.4034 6.16793 15.9255C6.87127 16.4476 7.71534 16.7515 8.59 16.7933C7.1338 17.9362 5.3439 18.5557 3.5 18.56C3.16574 18.5608 2.83174 18.5361 2.5 18.4863C4.37574 19.7154 6.55429 20.3612 8.78 20.36C10.3242 20.3704 11.8572 20.0633 13.2875 19.4595C14.7178 18.8556 16.0171 17.9672 17.1087 16.8469C18.2004 15.7266 19.0549 14.3915 19.6213 12.9319C20.1877 11.4723 20.4534 9.9162 20.4 8.36997V7.81997C21.1959 7.23213 21.8815 6.5253 22.42 5.72997L22 5.79997Z" fill="currentColor"/> </svg> </button> <button class="social-btn facebook"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M22 12C22 6.48 17.52 2 12 2C6.48 2 2 6.48 2 12C2 16.84 5.44 20.87 10 21.8V15H8V12H10V9.5C10 7.57 11.57 6 13.5 6H16V9H14C13.45 9 13 9.45 13 10V12H16V15H13V21.95C18.05 21.45 22 17.19 22 12Z" fill="currentColor"/> </svg> </button> <button class="social-btn linkedin"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 3H5C3.895 3 3 3.895 3 5V19C3 20.105 3.895 21 5 21H19C20.105 21 21 20.105 21 19V5C21 3.895 20.105 3 19 3ZM9 17H6.477V10H9V17ZM7.694 8.717C6.923 8.717 6.408 8.203 6.408 7.517C6.408 6.831 6.922 6.317 7.779 6.317C8.55 6.317 9.065 6.831 9.065 7.517C9.065 8.203 8.551 8.717 7.694 8.717ZM18 17H15.558V13.174C15.558 12.116 14.907 11.872 14.663 11.872C14.419 11.872 13.605 12.035 13.605 13.174C13.605 13.337 13.605 17 13.605 17H11.082V10H13.605V10.977C13.93 10.407 14.581 10 15.802 10C17.023 10 18 10.977 18 13.174V17Z" fill="currentColor"/> </svg> </button> <button class="social-btn pinterest"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.04 21.54C10 21.83 10.97 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 16.25 4.67 19.9 8.44 21.34C8.35 20.56 8.26 19.27 8.44 18.38L9.59 13.44C9.59 13.44 9.3 12.86 9.3 11.94C9.3 10.56 10.16 9.53 11.14 9.53C12 9.53 12.4 10.16 12.4 10.97C12.4 11.83 11.83 13.06 11.54 14.24C11.37 15.22 12.06 16.08 13.06 16.08C14.84 16.08 16.22 14.18 16.22 11.5C16.22 9.1 14.5 7.46 12.03 7.46C9.21 7.46 7.55 9.56 7.55 11.77C7.55 12.63 7.83 13.5 8.29 14.07C8.38 14.13 8.38 14.21 8.35 14.36L8.06 15.45C8.06 15.62 7.95 15.68 7.78 15.56C6.5 15 5.76 13.18 5.76 11.71C5.76 8.55 8 5.68 12.32 5.68C15.76 5.68 18.44 8.15 18.44 11.43C18.44 14.87 16.31 17.63 13.26 17.63C12.29 17.63 11.34 17.11 11 16.5L10.33 18.87C10.1 19.73 9.47 20.88 9.04 21.57V21.54Z" fill="currentColor"/> </svg> </button> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const shareButton = document.getElementById('shareButton'); const socialPopup = document.getElementById('socialPopup'); const pulseBg = document.getElementById('pulseBg'); const counter = document.getElementById('counter'); const socialButtons = document.querySelectorAll('.social-btn'); let isOpen = false; let count = 248; let originalWidth = 150; let originalHeight = 60; let originalRadius = 30; shareButton.addEventListener('click', function() { if (!isOpen) { // Morphing effect shareButton.style.transition = "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)"; shareButton.style.width = `${originalWidth * 1.1}px`; shareButton.style.height = `${originalHeight * 0.95}px`; shareButton.style.borderRadius = `${originalRadius * 0.7}px ${originalRadius * 1.2}px ${originalRadius * 1.2}px ${originalRadius * 0.7}px`; // Pulse background pulseBg.style.transition = "all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)"; pulseBg.style.opacity = "0.15"; pulseBg.style.transform = "scale(1.2)"; // Show social popup setTimeout(() => { socialPopup.classList.add('visible'); shareButton.innerHTML = ` <span class="button-text"> <svg class="share-icon" style="transform: rotate(90deg)" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <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" fill="currentColor"/> </svg> Close </span> `; }, 200); isOpen = true; } else { // Revert morphing shareButton.style.width = `${originalWidth}px`; shareButton.style.height = `${originalHeight}px`; shareButton.style.borderRadius = `${originalRadius}px`; // Reset pulse background pulseBg.style.opacity = "0"; pulseBg.style.transform = "scale(0.6)"; // Hide social popup socialPopup.classList.remove('visible'); shareButton.innerHTML = ` <span class="button-text"> <svg class="share-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <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" fill="currentColor"/> </svg> Share </span> `; isOpen = false; } }); // Handle social button clicks socialButtons.forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); // Increment counter count++; counter.textContent = count; counter.classList.add('count-animation'); // Animate the button click this.style.transform = "scale(0.8)"; setTimeout(() => { this.style.transform = ""; }, 200); // Remove animation class after it completes setTimeout(() => { counter.classList.remove('count-animation'); }, 500); // Close the popup after a slight delay setTimeout(() => { if (isOpen) { shareButton.click(); } }, 600); }); }); // Close popup when clicking outside document.addEventListener('click', function(e) { if (isOpen && !socialPopup.contains(e.target) && e.target !== shareButton && !shareButton.contains(e.target)) { shareButton.click(); } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary-color: #4A25E1; --splash-color-1: #6C4FF7; --splash-color-2: #9B6CFE; --text-color: #F9F9FB; --card-bg-color: #1E1F2E; --panel-bg-color: #141425; --success-color: #36D4A5; --warning-color: #FFC74C; --error-color: #FF7474; --neutral-color: #8B8CA7; --shadow-color: rgba(20, 20, 37, 0.5); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: var(--panel-bg-color); color: var(--text-color); overflow: hidden; } .dashboard { width: 700px; height: 700px; background-color: var(--card-bg-color); border-radius: 16px; box-shadow: 0 12px 24px var(--shadow-color); padding: 24px; display: flex; flex-direction: column; position: relative; overflow: hidden; } .dashboard::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at top right, rgba(107, 79, 255, 0.1), transparent 50%); pointer-events: none; } .dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .dashboard-title { font-size: 24px; font-weight: 700; } .user-profile { display: flex; align-items: center; gap: 12px; } .user-avatar { width: 36px; height: 36px; border-radius: 50%; background-color: var(--primary-color); display: flex; align-items: center; justify-content: center; font-weight: 600; } .dashboard-content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; } .stat-card { background-color: rgba(30, 31, 46, 0.6); border: 1px solid rgba(139, 140, 167, 0.1); border-radius: 12px; padding: 16px; } .stat-title { font-size: 14px; color: var(--neutral-color); margin-bottom: 8px; } .stat-value { font-size: 24px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .stat-trend { font-size: 12px; padding: 2px 6px; border-radius: 4px; display: inline-flex; align-items: center; } .trend-up { background-color: rgba(54, 212, 165, 0.1); color: var(--success-color); } .trend-down { background-color: rgba(255, 116, 116, 0.1); color: var(--error-color); } .actions-section { margin-top: 24px; } .section-title { font-size: 18px; font-weight: 600; margin-bottom: 16px; } .action-buttons { display: flex; gap: 16px; flex-wrap: wrap; } .action-container { position: relative; overflow: hidden; } .action-btn { position: relative; padding: 14px 20px; background-color: var(--primary-color); color: var(--text-color); border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.3s ease; z-index: 1; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(74, 37, 225, 0.2); } .action-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(74, 37, 225, 0.3); } .action-btn:active { transform: translateY(1px); } .btn-icon { display: inline-flex; align-items: center; justify-content: center; } .splash-effect { position: absolute; background: radial-gradient(circle, var(--splash-color-1), var(--splash-color-2)); border-radius: 50%; transform: scale(0); opacity: 0.7; pointer-events: none; z-index: 0; } .button-status { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--primary-color); color: var(--text-color); font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 2; } .button-status.success { background-color: var(--success-color); } .button-status.error { background-color: var(--error-color); } .action-btn.loading { background-color: var(--neutral-color); cursor: wait; } .action-btn.disabled { background-color: rgba(139, 140, 167, 0.3); cursor: not-allowed; transform: none; box-shadow: none; } .loading-spinner { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-top: 2px solid var(--text-color); border-radius: 50%; animation: spin 0.8s linear infinite; margin-right: 8px; display: none; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .btn-primary { background: linear-gradient(45deg, var(--primary-color), var(--splash-color-1)); } .btn-secondary { background: transparent; border: 1px solid var(--neutral-color); } .btn-warn { background: linear-gradient(45deg, var(--warning-color), #FFB020); } .tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background-color: var(--panel-bg-color); color: var(--text-color); padding: 8px 12px; border-radius: 6px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; margin-bottom: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 10; } .action-container:hover .tooltip { opacity: 1; transform: translateX(-50%) translateY(-4px); } .recent-activity { margin-top: auto; } .activity-list { display: flex; flex-direction: column; gap: 12px; } .activity-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; background-color: rgba(30, 31, 46, 0.6); border: 1px solid rgba(139, 140, 167, 0.1); } .activity-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .activity-icon.export { background-color: rgba(54, 212, 165, 0.1); color: var(--success-color); } .activity-icon.sync { background-color: rgba(107, 79, 255, 0.1); color: var(--primary-color); } .activity-content { flex: 1; } .activity-title { font-size: 14px; font-weight: 500; } .activity-time { font-size: 12px; color: var(--neutral-color); } @media (max-width: 600px) { .dashboard { height: auto; } .dashboard-content { grid-template-columns: 1fr; } .action-buttons { flex-direction: column; } } </style> </head> <body> <div class="dashboard"> <div class="dashboard-header"> <h1 class="dashboard-title">Analytics Dashboard</h1> <div class="user-profile"> <span>Alex Chen</span> <div class="user-avatar">AC</div> </div> </div> <div class="dashboard-content"> <div class="stat-card"> <div class="stat-title">Monthly Active Users</div> <div class="stat-value"> 42,815 <span class="stat-trend trend-up">+12.3%</span> </div> </div> <div class="stat-card"> <div class="stat-title">Conversion Rate</div> <div class="stat-value"> 7.8% <span class="stat-trend trend-up">+2.4%</span> </div> </div> <div class="stat-card"> <div class="stat-title">Revenue</div> <div class="stat-value"> $58,340 <span class="stat-trend trend-up">+8.7%</span> </div> </div> <div class="stat-card"> <div class="stat-title">Churn Rate</div> <div class="stat-value"> 3.2% <span class="stat-trend trend-down">-0.5%</span> </div> </div> </div> <div class="actions-section"> <h2 class="section-title">Quick Actions</h2> <div class="action-buttons"> <div class="action-container"> <button class="action-btn btn-primary" id="syncButton"> <div class="loading-spinner"></div> <span class="btn-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21.68 16.96L19.93 15.21C19.77 15.05 19.54 15 19.33 15C19.12 15 18.89 15.05 18.73 15.21C18.42 15.53 18.42 16.05 18.73 16.36L19.61 17.24H9.97C6.46 17.24 3.6 14.39 3.6 10.87C3.6 9.51 4.08 8.19 4.97 7.14C5.24 6.81 5.19 6.32 4.86 6.05C4.53 5.78 4.04 5.83 3.77 6.16C2.65 7.47 2.05 9.14 2.05 10.87C2.05 15.25 5.59 18.79 9.97 18.79H19.61L18.73 19.67C18.42 19.98 18.42 20.5 18.73 20.82C18.89 20.97 19.12 21.03 19.33 21.03C19.54 21.03 19.77 20.97 19.93 20.82L21.68 19.07C22.11 18.64 22.11 17.39 21.68 16.96Z" fill="currentColor"/> <path d="M21.94 13.12C21.92 12.71 21.56 12.42 21.15 12.44C20.74 12.46 20.44 12.82 20.47 13.23C20.52 14.55 20.22 15.86 19.58 17.02C19.37 17.39 19.47 17.85 19.84 18.06C19.96 18.12 20.08 18.15 20.21 18.15C20.48 18.15 20.74 18.01 20.89 17.76C21.69 16.3 22.06 14.65 21.94 13.12Z" fill="currentColor"/> <path d="M5.27 16.9C5.06 16.53 4.6 16.43 4.23 16.64C2.7 17.49 1.76 19.17 1.76 20.99C1.76 21.4 2.09 21.74 2.5 21.74C2.91 21.74 3.24 21.4 3.24 20.99C3.24 19.66 3.92 18.42 5.02 17.8C5.39 17.6 5.48 17.14 5.27 16.9Z" fill="currentColor"/> <path d="M21.5 2.25H11.86C7.48 2.25 3.94 5.79 3.94 10.17C3.94 11.9 4.55 13.58 5.66 14.89C5.8 15.05 6.02 15.12 6.24 15.12C6.41 15.12 6.58 15.07 6.73 14.95C7.05 14.69 7.1 14.19 6.84 13.87C5.95 12.83 5.47 11.51 5.47 10.17C5.47 6.66 8.33 3.8 11.84 3.8H21.48L20.6 4.68C20.29 4.99 20.29 5.51 20.6 5.83C20.76 5.98 20.99 6.04 21.2 6.04C21.41 6.04 21.64 5.98 21.8 5.83L23.55 4.08C23.98 3.65 23.98 2.4 23.55 1.97L21.8 0.22C21.49 -0.09 20.97 -0.09 20.65 0.22C20.34 0.53 20.34 1.05 20.65 1.37L21.5 2.25Z" fill="currentColor"/> </svg> </span> Sync Data </button> <div class="tooltip">Refresh data from all connected sources</div> <div class="button-status success"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor"/> </svg> Sync Complete </div> </div> <div class="action-container"> <button class="action-btn btn-secondary" id="exportButton"> <div class="loading-spinner"></div> <span class="btn-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM18.53 11.06L13.11 16.48C12.88 16.71 12.57 16.82 12.27 16.82C11.96 16.82 11.66 16.71 11.42 16.48L8.11 13.17C7.66 12.72 7.66 11.97 8.11 11.52C8.56 11.07 9.31 11.07 9.76 11.52L12.27 14.03L16.88 9.42C17.33 8.97 18.08 8.97 18.53 9.42C18.98 9.87 18.98 10.61 18.53 11.06Z" fill="currentColor"/> </svg> </span> Export Report </button> <div class="tooltip">Generate and download analytics report</div> <div class="button-status success"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor"/> </svg> Report Generated </div> </div> <div class="action-container"> <button class="action-btn btn-warn" id="alertButton"> <div class="loading-spinner"></div> <span class="btn-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21.76 15.92L15.36 4.4C14.5 2.85 13.31 2 12 2C10.69 2 9.49 2.85 8.64 4.4L2.24 15.92C1.43 17.39 1.34 18.8 1.98 19.94C2.62 21.07 3.92 21.74 5.6 21.74H18.4C20.08 21.74 21.38 21.07 22.02 19.94C22.66 18.8 22.57 17.38 21.76 15.92ZM11.99 9.01C11.99 8.45 12.44 8 12.99 8C13.54 8 13.99 8.45 13.99 9.01V14C13.99 14.56 13.54 15.01 12.99 15.01C12.44 15.01 11.99 14.56 11.99 14V9.01ZM12.99 18C12.44 18 11.99 17.55 11.99 16.99C11.99 16.44 12.43 15.99 12.98 15.99C13.54 15.99 13.99 16.44 13.99 17C13.99 17.55 13.54 18 12.99 18Z" fill="currentColor"/> </svg> </span> Configure Alerts </button> <div class="tooltip">Set custom alerts for metric thresholds</div> <div class="button-status success"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor"/> </svg> Alerts Configured </div> </div> </div> </div> <div class="recent-activity"> <h2 class="section-title">Recent Activity</h2> <div class="activity-list"> <div class="activity-item"> <div class="activity-icon export"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.35 12.74L12.2 16.9C12.07 17.03 11.91 17.1 11.74 17.1C11.57 17.1 11.41 17.03 11.28 16.9C11.01 16.63 11.01 16.18 11.28 15.91L14.19 13H8.05C7.65 13 7.33 12.68 7.33 12.28C7.33 11.88 7.65 11.56 8.05 11.56H14.19L11.28 8.65C11.01 8.38 11.01 7.93 11.28 7.66C11.54 7.39 12 7.39 12.26 7.66L16.42 11.82C16.66 12.08 16.66 12.5 16.35 12.74Z" fill="currentColor"/> </svg> </div> <div class="activity-content"> <div class="activity-title">Monthly report exported</div> <div class="activity-time">10 minutes ago</div> </div> </div> <div class="activity-item"> <div class="activity-icon sync"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21.68 16.96L19.93 15.21C19.77 15.05 19.54 15 19.33 15C19.12 15 18.89 15.05 18.73 15.21C18.42 15.53 18.42 16.05 18.73 16.36L19.61 17.24H9.97C6.46 17.24 3.6 14.39 3.6 10.87C3.6 9.51 4.08 8.19 4.97 7.14C5.24 6.81 5.19 6.32 4.86 6.05C4.53 5.78 4.04 5.83 3.77 6.16C2.65 7.47 2.05 9.14 2.05 10.87C2.05 15.25 5.59 18.79 9.97 18.79H19.61L18.73 19.67C18.42 19.98 18.42 20.5 18.73 20.82C18.89 20.97 19.12 21.03 19.33 21.03C19.54 21.03 19.77 20.97 19.93 20.82L21.68 19.07C22.11 18.64 22.11 17.39 21.68 16.96Z" fill="currentColor"/> <path d="M21.5 2.25H11.86C7.48 2.25 3.94 5.79 3.94 10.17C3.94 11.9 4.55 13.58 5.66 14.89C5.8 15.05 6.02 15.12 6.24 15.12C6.41 15.12 6.58 15.07 6.73 14.95C7.05 14.69 7.1 14.19 6.84 13.87C5.95 12.83 5.47 11.51 5.47 10.17C5.47 6.66 8.33 3.8 11.84 3.8H21.48L20.6 4.68C20.29 4.99 20.29 5.51 20.6 5.83C20.76 5.98 20.99 6.04 21.2 6.04C21.41 6.04 21.64 5.98 21.8 5.83L23.55 4.08C23.98 3.65 23.98 2.4 23.55 1.97L21.8 0.22C21.49 -0.09 20.97 -0.09 20.65 0.22C20.34 0.53 20.34 1.05 20.65 1.37L21.5 2.25Z" fill="currentColor"/> </svg> </div> <div class="activity-content"> <div class="activity-title">Data synchronized from API sources</div> <div class="activity-time">35 minutes ago</div> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const buttons = document.querySelectorAll('.action-btn'); // Add splash effect to all buttons buttons.forEach(button => { button.addEventListener('click', function(e) { // Remove any existing splash elements const existingSplash = this.querySelector('.splash-effect'); if (existingSplash) { existingSplash.remove(); } // Create new splash element const splash = document.createElement('span'); splash.classList.add('splash-effect'); // Calculate the size needed to cover the button const rect = this.getBoundingClientRect(); const size = Math.max(rect.width, rect.height) * 2; // Position the splash at the click point const x = e.clientX - rect.left; const y = e.clientY - rect.top; splash.style.width = size + 'px'; splash.style.height = size + 'px'; splash.style.left = x - (size / 2) + 'px'; splash.style.top = y - (size / 2) + 'px'; this.appendChild(splash); // Show the loading state this.classList.add('loading'); const spinner = this.querySelector('.loading-spinner'); spinner.style.display = 'inline-block'; // Animate the splash setTimeout(() => { splash.style.opacity = '0.7'; splash.style.transform = 'scale(1)'; splash.style.transition = 'transform 0.8s ease-out, opacity 0.8s ease-out'; }, 0); // After the animation, fade it out setTimeout(() => { splash.style.opacity = '0'; }, 400); // Show success state setTimeout(() => { // Remove splash after animation if (splash.parentNode) { splash.parentNode.removeChild(splash); } // Hide the loading spinner spinner.style.display = 'none'; this.classList.remove('loading'); // Show success state const statusElement = this.parentNode.querySelector('.button-status'); statusElement.style.opacity = '1'; // Hide success state after a moment setTimeout(() => { statusElement.style.opacity = '0'; }, 1500); }, 800); }); }); // Helper function for gradient animation in buttons function animateGradient(button) { let startPos = 0; setInterval(() => { startPos = (startPos + 1) % 360; button.style.background = `linear-gradient(${startPos}deg, var(--primary-color), var(--splash-color-1))`; }, 50); } // Apply gradient animation to the primary button const primaryButton = document.querySelector('.btn-primary'); animateGradient(primaryButton); }); </script> </body> </html>
<html> <head> <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: 700px; width: 100%; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); padding: 20px; overflow: hidden; } .container { width: 100%; max-width: 660px; background-color: white; border-radius: 24px; box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); padding: 40px; position: relative; overflow: hidden; } .container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, #FF9966, #FF5E62); } h1 { font-size: 28px; color: #333; margin-bottom: 24px; font-weight: 700; } .search-form { display: flex; flex-direction: column; gap: 24px; } .input-group { display: flex; flex-direction: column; gap: 8px; } .form-row { display: flex; gap: 16px; flex-wrap: wrap; } .input-group { flex: 1; min-width: 200px; } label { font-size: 14px; font-weight: 600; color: #555; display: block; margin-bottom: 5px; } input, select { width: 100%; padding: 12px 16px; border: 2px solid #e1e1e1; border-radius: 12px; font-size: 16px; transition: all 0.3s; background-color: #f9f9f9; } input:focus, select:focus { border-color: #FF9966; outline: none; background-color: #fff; box-shadow: 0 0 0 3px rgba(255, 153, 102, 0.2); } .book-btn { padding: 16px 32px; background: linear-gradient(90deg, #FF9966, #FF5E62); color: white; border: none; border-radius: 50px; font-size: 18px; font-weight: 600; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s, background 0.3s; box-shadow: 0 4px 12px rgba(255, 94, 98, 0.3); position: relative; overflow: hidden; align-self: center; margin-top: 16px; letter-spacing: 0.5px; } .book-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 16px rgba(255, 94, 98, 0.4); background: linear-gradient(90deg, #FF8966, #FF4E62); } .book-btn:active { transform: translateY(1px) scale(0.98); box-shadow: 0 2px 8px rgba(255, 94, 98, 0.4); } .book-btn span { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; } .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); transform: scale(0); animation: ripple 0.8s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(4); opacity: 0; } } .attractions { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; } .attraction { display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; transform: translateY(20px); transition: all 0.5s; } .attraction.visible { opacity: 1; transform: translateY(0); } .attraction-icon { width: 52px; height: 52px; background-color: #FFF4ED; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; color: #FF7E5F; font-size: 24px; } .attraction-name { font-size: 14px; color: #555; font-weight: 500; } .plane-animation { position: absolute; top: 100px; left: -60px; font-size: 24px; color: #FF7E5F; transform: rotate(30deg); z-index: 10; animation: fly 10s linear infinite; opacity: 0; } @keyframes fly { 0% { opacity: 0; transform: translateX(0) translateY(0) rotate(30deg); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(700px) translateY(-100px) rotate(30deg); } } .destinations { position: absolute; bottom: 20px; left: 0; width: 100%; display: flex; justify-content: center; gap: 12px; font-size: 12px; color: #888; padding: 0 20px; } .destination { background-color: #f0f0f0; padding: 4px 10px; border-radius: 12px; transition: all 0.3s; } .destination:hover { background-color: #FFE4D6; color: #FF5E62; transform: translateY(-2px); } @media (max-width: 600px) { .container { padding: 24px; border-radius: 16px; } h1 { font-size: 24px; margin-bottom: 16px; } .form-row { flex-direction: column; gap: 16px; } .book-btn { width: 100%; } .attractions { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); } .destinations { flex-wrap: wrap; gap: 8px; } } </style> </head> <body> <div class="container"> <div class="plane-animation">✈️</div> <h1>Where will your journey take you?</h1> <form class="search-form"> <div class="form-row"> <div class="input-group"> <label for="from">Leaving from</label> <input type="text" id="from" placeholder="City or airport" autocomplete="off"> </div> <div class="input-group"> <label for="to">Going to</label> <input type="text" id="to" placeholder="Dream destination" autocomplete="off"> </div> </div> <div class="form-row"> <div class="input-group"> <label for="depart">Depart</label> <input type="date" id="depart"> </div> <div class="input-group"> <label for="return">Return</label> <input type="date" id="return"> </div> <div class="input-group"> <label for="travelers">Travelers</label> <select id="travelers"> <option value="1">1 Adult</option> <option value="2">2 Adults</option> <option value="3">3 Adults</option> <option value="4">4 Adults</option> <option value="family">2 Adults, 2 Children</option> </select> </div> </div> <button type="button" class="book-btn"> <span>Find Your Adventure <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 0L6.59 1.41L12.17 7H0V9H12.17L6.59 14.59L8 16L16 8L8 0Z" fill="white"/> </svg></span> </button> </form> <div class="attractions"> <div class="attraction"> <div class="attraction-icon">🏝️</div> <div class="attraction-name">Beach Escapes</div> </div> <div class="attraction"> <div class="attraction-icon">🏔️</div> <div class="attraction-name">Mountain Treks</div> </div> <div class="attraction"> <div class="attraction-icon">🏙️</div> <div class="attraction-name">City Breaks</div> </div> <div class="attraction"> <div class="attraction-icon">🏰</div> <div class="attraction-name">Cultural Tours</div> </div> </div> <div class="destinations"> <div class="destination">Tokyo</div> <div class="destination">Bali</div> <div class="destination">Paris</div> <div class="destination">New York</div> <div class="destination">Santorini</div> </div> </div> <script> // Add ripple effect to button const btn = document.querySelector('.book-btn'); btn.addEventListener('click', function(e) { // Change button gradient on click const originalGradient = 'linear-gradient(90deg, #FF9966, #FF5E62)'; const clickGradient = 'linear-gradient(90deg, #FF5E62, #FF9966)'; this.style.background = clickGradient; // Add bounce animation this.style.animation = 'none'; setTimeout(() => { this.style.animation = 'bounce 0.5s'; }, 10); // Create ripple element const ripple = document.createElement('span'); ripple.classList.add('ripple'); // Get position of click relative to button const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; // Set ripple position and dimensions ripple.style.left = x + 'px'; ripple.style.top = y + 'px'; ripple.style.width = ripple.style.height = Math.max(rect.width, rect.height) + 'px'; // Add ripple to button this.appendChild(ripple); // Show a success message or do something after click setTimeout(() => { const from = document.getElementById('from').value || 'your location'; const to = document.getElementById('to').value || 'your destination'; alert(`Looking for flights from ${from} to ${to}`); // Reset button gradient this.style.background = originalGradient; // Remove ripple after animation completes ripple.remove(); }, 800); }); // Create bounce animation const style = document.createElement('style'); style.textContent = ` @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } `; document.head.appendChild(style); // Animate attractions with a staggered delay const attractions = document.querySelectorAll('.attraction'); setTimeout(() => { attractions.forEach((attraction, index) => { setTimeout(() => { attraction.classList.add('visible'); }, index * 150); }); }, 500); // Plane animation trigger setInterval(() => { const plane = document.querySelector('.plane-animation'); plane.style.animation = 'none'; setTimeout(() => { plane.style.animation = 'fly 10s linear'; }, 100); }, 11000); // When clicking destinations, fill the destination field const destinations = document.querySelectorAll('.destination'); destinations.forEach(dest => { dest.addEventListener('click', function() { document.getElementById('to').value = this.textContent; // Add a little bounce to the destination field const toField = document.getElementById('to'); toField.style.animation = 'none'; setTimeout(() => { toField.style.animation = 'bounce 0.5s'; }, 10); }); }); // Prevent actual form submission document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); }); </script> </body> </html>
