Button hover effects can significantly enhance the user experience by providing visual feedback and making interactions more engaging. These subtle animations can transform a simple button into a dynamic element that captures attention.
In this article, we will explore 10 button hover effect examples that can elevate your UI design. From smooth transitions to eye-catching animations, these examples will inspire you to create stunning interfaces effortlessly.
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
Subframe's drag-and-drop interface and intuitive, responsive canvas make it easy to design pixel-perfect button hover effects. Loved by designers and developers alike, Subframe ensures your UI is both stunning and functional.
Start for free and elevate your design game 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 hover effects and stunning interfaces in minutes. Our drag-and-drop editor ensures efficiency and precision.
Don't wait! Start for free and begin designing beautiful, responsive UIs right away.
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Enterprise Dashboard Button</title> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; } body { display: flex; align-items: center; justify-content: center; min-height: 700px; background-color: #f5f7fa; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #334155; padding: 20px; overflow-x: hidden; } .dashboard-container { width: 100%; max-width: 660px; background-color: #ffffff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); padding: 30px; position: relative; overflow: hidden; } .dashboard-header { margin-bottom: 25px; position: relative; } .dashboard-title { font-size: 24px; font-weight: 700; color: #1e293b; margin-bottom: 6px; letter-spacing: -0.5px; } .dashboard-subtitle { font-size: 14px; color: #64748b; line-height: 1.5; } .action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-bottom: 28px; } .action-button { position: relative; background-color: #f1f5f9; border: none; border-radius: 10px; padding: 20px 16px; text-align: center; cursor: pointer; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .action-button::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at center, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0)); transition: all 0.4s ease; z-index: 0; border-radius: 10px; } .action-button:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 15px rgba(14, 165, 233, 0.15); background-color: #f8fafc; } .action-button:hover::before { background: radial-gradient(circle at center, rgba(56, 189, 248, 0.12), rgba(56, 189, 248, 0)); } .action-button:active { transform: translateY(0) scale(0.98); } .action-icon { font-size: 22px; margin-bottom: 10px; color: #0ea5e9; position: relative; z-index: 1; transition: all 0.3s ease; } .action-button:hover .action-icon { transform: scale(1.1); color: #0284c7; } .action-label { font-size: 13px; font-weight: 600; color: #334155; position: relative; z-index: 1; transition: all 0.3s ease; } .dashboard-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 28px; } .metric-card { background-color: #f1f5f9; border-radius: 10px; padding: 20px; position: relative; transition: all 0.3s ease; } .metric-label { font-size: 13px; color: #64748b; margin-bottom: 8px; display: block; } .metric-value { font-size: 24px; font-weight: 700; color: #0f172a; margin-bottom: 4px; } .metric-trend { font-size: 12px; display: flex; align-items: center; gap: 4px; } .trend-up { color: #10b981; } .trend-down { color: #ef4444; } .primary-button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; background-color: #0284c7; color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; box-shadow: 0 2px 4px rgba(2, 132, 199, 0.2); } .primary-button::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.12), transparent 70%); opacity: 0; transition: opacity 0.4s ease; } .primary-button:hover { background-color: #0369a1; transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 15px rgba(2, 132, 199, 0.25); } .primary-button:hover::before { opacity: 1; } .primary-button:active { transform: translateY(0) scale(0.98); box-shadow: 0 1px 2px rgba(2, 132, 199, 0.3); } .primary-button-icon { margin-left: 8px; font-size: 16px; transition: transform 0.3s ease; } .primary-button:hover .primary-button-icon { transform: translateX(3px); } .pattern-bg { position: absolute; top: 0; right: 0; width: 180px; height: 180px; opacity: 0.04; background-image: radial-gradient(#0284c7 1px, transparent 1px); background-size: 16px 16px; pointer-events: none; z-index: 0; } .notification-badge { position: absolute; top: -5px; right: -5px; background-color: #ef4444; color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3); transform: scale(0); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .action-button.has-notification .notification-badge { transform: scale(1); } @media (max-width: 500px) { .dashboard-container { padding: 20px; } .action-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; } .action-button { padding: 16px 12px; } .dashboard-metrics { grid-template-columns: 1fr; } } </style> </head> <body> <div class="dashboard-container"> <div class="pattern-bg"></div> <div class="dashboard-header"> <h1 class="dashboard-title">Analytics Dashboard</h1> <p class="dashboard-subtitle">Monitor key performance metrics and take action</p> </div> <div class="action-grid"> <button class="action-button has-notification"> <span class="notification-badge">3</span> <div class="action-icon">📊</div> <span class="action-label">Reports</span> </button> <button class="action-button"> <div class="action-icon">⚙️</div> <span class="action-label">Settings</span> </button> <button class="action-button has-notification"> <span class="notification-badge">2</span> <div class="action-icon">💬</div> <span class="action-label">Messages</span> </button> <button class="action-button"> <div class="action-icon">👥</div> <span class="action-label">Users</span> </button> </div> <div class="dashboard-metrics"> <div class="metric-card"> <span class="metric-label">Active Users</span> <div class="metric-value">4,378</div> <div class="metric-trend trend-up"> <span>↑ 12.8%</span> vs last month </div> </div> <div class="metric-card"> <span class="metric-label">Avg. Session Time</span> <div class="metric-value">4:23</div> <div class="metric-trend trend-up"> <span>↑ 0:42</span> vs last month </div> </div> </div> <button class="primary-button"> <span>Generate Full Report</span> <span class="primary-button-icon">→</span> </button> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Add pulsing animation to notification badges const badges = document.querySelectorAll('.notification-badge'); badges.forEach(badge => { setTimeout(() => { setInterval(() => { badge.style.transform = 'scale(1.2)'; setTimeout(() => { badge.style.transform = 'scale(1)'; }, 300); }, 5000); }, Math.random() * 2000); }); // Add subtle hover interaction for metric cards const metricCards = document.querySelectorAll('.metric-card'); metricCards.forEach(card => { card.addEventListener('mouseenter', () => { card.style.transform = 'translateY(-3px)'; card.style.boxShadow = '0 6px 20px rgba(0, 0, 0, 0.05)'; card.style.backgroundColor = '#f8fafc'; }); card.addEventListener('mouseleave', () => { card.style.transform = 'translateY(0)'; card.style.boxShadow = 'none'; card.style.backgroundColor = '#f1f5f9'; }); }); // Demo interaction for primary button const primaryButton = document.querySelector('.primary-button'); primaryButton.addEventListener('click', function(e) { e.preventDefault(); // Prevent default form submission behavior const originalText = this.querySelector('span:first-child').textContent; const originalIcon = this.querySelector('.primary-button-icon').textContent; // Show loading state this.classList.add('processing'); this.style.width = `${this.offsetWidth}px`; this.querySelector('span:first-child').textContent = 'Processing...'; this.querySelector('.primary-button-icon').textContent = '⟳'; this.querySelector('.primary-button-icon').style.animation = 'spin 1s linear infinite'; // Simulate process completion setTimeout(() => { this.classList.remove('processing'); this.querySelector('span:first-child').textContent = 'Report Generated!'; this.querySelector('.primary-button-icon').textContent = '✓'; this.querySelector('.primary-button-icon').style.animation = 'none'; // Reset after a delay setTimeout(() => { this.querySelector('span:first-child').textContent = originalText; this.querySelector('.primary-button-icon').textContent = originalIcon; this.style.width = ''; }, 2000); }, 1800); }); // Add keyframe animation for the spin effect const style = document.createElement('style'); style.textContent = ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `; document.head.appendChild(style); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NeoN Pulse Gaming Portal</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap'); body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #0a0a0a; background-image: radial-gradient(#24005f15 1px, transparent 1px), radial-gradient(#24005f15 1px, transparent 1px); background-size: 30px 30px; background-position: 0 0, 15px 15px; overflow: hidden; } .portal-container { width: 680px; max-width: 100%; height: 680px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; position: relative; } .portal-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #0a0a0a 25px, transparent 1%) center, linear-gradient(#0a0a0a 25px, transparent 1%) center, rgba(76, 0, 255, 0.1); background-size: 26px 26px; z-index: -1; opacity: 0.4; } .portal-header { text-align: center; margin-bottom: 30px; color: #fff; } .portal-title { font-size: 3.5rem; margin-bottom: 10px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 10px rgba(123, 31, 162, 0.5), 0 0 20px rgba(123, 31, 162, 0.3), 0 0 30px rgba(123, 31, 162, 0.1); } .portal-title span { color: #ff00e5; position: relative; } .portal-subtitle { font-size: 1.2rem; color: #c8c8c8; max-width: 600px; line-height: 1.5; } .button-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 100%; max-width: 600px; } .neon-button { position: relative; display: inline-flex; justify-content: center; align-items: center; padding: 20px 30px; background: rgba(10, 10, 10, 0.8); color: #fff; font-size: 18px; font-weight: 600; text-transform: uppercase; text-decoration: none; letter-spacing: 1px; overflow: hidden; transition: all 0.3s ease; border: 1px solid rgba(123, 31, 162, 0.3); border-radius: 4px; z-index: 1; cursor: pointer; box-shadow: 0 0 10px rgba(123, 31, 162, 0.2); } .neon-button .button-content { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 12px; } .neon-button .icon { width: 24px; height: 24px; } .neon-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, #ff00e5, #7b1fa2, #3700b3); opacity: 0; transition: opacity 0.3s ease; z-index: 0; } .neon-button::after { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: transparent; z-index: -1; border-radius: 4px; opacity: 0; transition: opacity 0.3s ease; } .circuit-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 1; } .circuit-line { position: absolute; background: transparent; z-index: 1; opacity: 0; transition: all 0.3s ease; } .neon-button:hover { transform: translateY(-3px); box-shadow: 0 0 15px rgba(255, 0, 229, 0.5), 0 0 30px rgba(123, 31, 162, 0.3); } .neon-button:hover::before { opacity: 0.2; } .neon-button:hover::after { opacity: 1; box-shadow: 0 0 15px rgba(255, 0, 229, 0.6), 0 0 30px rgba(123, 31, 162, 0.4), 0 0 45px rgba(55, 0, 179, 0.2); animation: pulse 1.5s infinite; } .neon-button:hover .circuit-line { opacity: 1; animation: flowLine 2s linear infinite; box-shadow: 0 0 8px rgba(255, 0, 229, 0.6); } .neon-button:active { transform: scale(0.98); } @keyframes pulse { 0% { box-shadow: 0 0 15px rgba(255, 0, 229, 0.6), 0 0 30px rgba(123, 31, 162, 0.4); opacity: 0.8; } 50% { box-shadow: 0 0 25px rgba(255, 0, 229, 0.8), 0 0 45px rgba(123, 31, 162, 0.6), 0 0 60px rgba(55, 0, 179, 0.3); opacity: 1; } 100% { box-shadow: 0 0 15px rgba(255, 0, 229, 0.6), 0 0 30px rgba(123, 31, 162, 0.4); opacity: 0.8; } } @keyframes flowLine { 0% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 0; } } .neon-button[data-color="cyan"]::after { box-shadow: 0 0 15px rgba(0, 229, 255, 0.6), 0 0 30px rgba(31, 162, 162, 0.4), 0 0 45px rgba(0, 128, 179, 0.2); } .neon-button[data-color="cyan"]:hover::after { box-shadow: 0 0 15px rgba(0, 229, 255, 0.6), 0 0 30px rgba(31, 162, 162, 0.4), 0 0 45px rgba(0, 128, 179, 0.2); } .neon-button[data-color="cyan"]::before { background: linear-gradient(45deg, #00e5ff, #1fa2a2, #00b3b3); } .neon-button[data-color="cyan"]:hover .circuit-line { box-shadow: 0 0 8px rgba(0, 229, 255, 0.6); } .neon-button[data-color="green"]::after { box-shadow: 0 0 15px rgba(0, 255, 85, 0.6), 0 0 30px rgba(31, 162, 82, 0.4), 0 0 45px rgba(0, 179, 60, 0.2); } .neon-button[data-color="green"]:hover::after { box-shadow: 0 0 15px rgba(0, 255, 85, 0.6), 0 0 30px rgba(31, 162, 82, 0.4), 0 0 45px rgba(0, 179, 60, 0.2); } .neon-button[data-color="green"]::before { background: linear-gradient(45deg, #00ff55, #1fa252, #00b33c); } .neon-button[data-color="green"]:hover .circuit-line { box-shadow: 0 0 8px rgba(0, 255, 85, 0.6); } .neon-button[data-color="orange"]::after { box-shadow: 0 0 15px rgba(255, 145, 0, 0.6), 0 0 30px rgba(162, 93, 31, 0.4), 0 0 45px rgba(179, 90, 0, 0.2); } .neon-button[data-color="orange"]:hover::after { box-shadow: 0 0 15px rgba(255, 145, 0, a.6), 0 0 30px rgba(162, 93, 31, 0.4), 0 0 45px rgba(179, 90, 0, 0.2); } .neon-button[data-color="orange"]::before { background: linear-gradient(45deg, #ff9100, #a25d1f, #b35a00); } .neon-button[data-color="orange"]:hover .circuit-line { box-shadow: 0 0 8px rgba(255, 145, 0, 0.6); } .footer-text { margin-top: 40px; color: #7c7c7c; font-size: 14px; text-align: center; letter-spacing: 1px; } @media (max-width: 600px) { .portal-title { font-size: 2.5rem; } .portal-subtitle { font-size: 1rem; } .button-grid { grid-template-columns: 1fr; } .neon-button { padding: 15px 20px; font-size: 16px; } } </style> </head> <body> <div class="portal-container"> <div class="portal-header"> <h1 class="portal-title">Neo<span>PULSE</span></h1> <p class="portal-subtitle">Unlock next-gen gaming experiences with our cutting-edge tournament platform. Choose your battleground and dominate the leaderboards.</p> </div> <div class="button-grid"> <div class="neon-button" data-color="magenta"> <div class="button-content"> <svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17 10H19C21 10 22 9 22 7V5C22 3 21 2 19 2H17C15 2 14 3 14 5V7C14 9 15 10 17 10Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5 22H7C9 22 10 21 10 19V17C10 15 9 14 7 14H5C3 14 2 15 2 17V19C2 21 3 22 5 22Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6 10C8.20914 10 10 8.20914 10 6C10 3.79086 8.20914 2 6 2C3.79086 2 2 3.79086 2 6C2 8.20914 3.79086 10 6 10Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M18 22C20.2091 22 22 20.2091 22 18C22 15.7909 20.2091 14 18 14C15.7909 14 14 15.7909 14 18C14 20.2091 15.7909 22 18 22Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> </svg> Battle Royale </div> <div class="circuit-container"></div> </div> <div class="neon-button" data-color="cyan"> <div class="button-content"> <svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.05 2.53001L4.03002 6.46001C2.10002 7.72001 2.10002 10.54 4.03002 11.8L10.05 15.73C11.13 16.44 12.91 16.44 13.99 15.73L19.98 11.8C21.9 10.54 21.9 7.73001 19.98 6.47001L13.99 2.54001C12.91 1.82001 11.13 1.82001 10.05 2.53001Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5.63 13.08L5.62 17.77C5.62 19.04 6.6 20.4 7.8 20.8L10.99 21.86C11.54 22.04 12.45 22.04 13.01 21.86L16.2 20.8C17.4 20.4 18.38 19.04 18.38 17.77V13.13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M21.4 15V9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> Virtual Worlds </div> <div class="circuit-container"></div> </div> <div class="neon-button" data-color="green"> <div class="button-content"> <svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M14.25 12V6.44" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12.9699 7.70001L14.2499 6.42001L15.5299 7.70001" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9.75 12V17.56" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M11.03 16.3L9.75 17.58L8.47 16.3" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M14.25 12C14.25 13.24 13.24 14.25 12 14.25C10.76 14.25 9.75 13.24 9.75 12C9.75 10.76 10.76 9.75 12 9.75C13.24 9.75 14.25 10.76 14.25 12Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> </svg> Speedrun Trials </div> <div class="circuit-container"></div> </div> <div class="neon-button" data-color="orange"> <div class="button-content"> <svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18.04 13.55C17.62 13.96 17.38 14.55 17.44 15.18C17.53 16.26 18.52 17.05 19.6 17.05H21.5V18.24C21.5 20.31 19.81 22 17.74 22H6.26C4.19 22 2.5 20.31 2.5 18.24V11.51C2.5 9.44001 4.19 7.75 6.26 7.75H17.74C19.81 7.75 21.5 9.44001 21.5 11.51V12.95H19.48C18.92 12.95 18.41 13.17 18.04 13.55Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2.5 12.41V7.84004C2.5 6.65004 3.23 5.59000 4.34 5.17000L12.28 2.17000C13.52 1.70000 14.85 2.62003 14.85 3.95003V7.75002" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M22.5588 13.9702V16.0302C22.5588 16.5802 22.1188 17.0302 21.5588 17.0502H19.5988C18.5188 17.0502 17.5288 16.2602 17.4388 15.1802C17.3788 14.5502 17.6188 13.9602 18.0388 13.5502C18.4088 13.1702 18.9188 12.9502 19.4788 12.9502H21.5588C22.1188 12.9702 22.5588 13.4202 22.5588 13.9702Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M7 12H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> Premium Pass </div> <div class="circuit-container"></div> </div> </div> <p class="footer-text">QUANTUM SYNC ENGINE • EST. 2087</p> </div> <script> // Create circuit-like lines for each button document.querySelectorAll('.neon-button').forEach(button => { const circuitContainer = button.querySelector('.circuit-container'); const buttonColor = button.getAttribute('data-color') || 'magenta'; let color; switch(buttonColor) { case 'cyan': color = '#00e5ff'; break; case 'green': color = '#00ff55'; break; case 'orange': color = '#ff9100'; break; default: color = '#ff00e5'; } // Horizontal circuit lines for (let i = 0; i < 3; i++) { const line = document.createElement('div'); line.classList.add('circuit-line'); line.style.height = '2px'; line.style.width = `${30 + Math.random() * 40}%`; line.style.top = `${25 + i * 25}%`; line.style.left = `${Math.random() * 10}%`; line.style.background = color; line.style.transformOrigin = 'left center'; line.style.animationDelay = `${Math.random() * 0.5}s`; circuitContainer.appendChild(line); } // Vertical circuit lines for (let i = 0; i < 2; i++) { const line = document.createElement('div'); line.classList.add('circuit-line'); line.style.width = '2px'; line.style.height = `${30 + Math.random() * 40}%`; line.style.left = `${30 + i * 40}%`; line.style.top = `${Math.random() * 10}%`; line.style.background = color; line.style.transformOrigin = 'center top'; line.style.animationDelay = `${Math.random() * 0.5}s`; circuitContainer.appendChild(line); } // Corner circuit lines for (let i = 0; i < 2; i++) { const corner = document.createElement('div'); corner.classList.add('circuit-line'); // Create an L-shaped corner corner.style.width = '15px'; corner.style.height = '15px'; corner.style.border = `2px solid ${color}`; corner.style.borderWidth = i % 2 === 0 ? '2px 0 0 2px' : '0 2px 2px 0'; corner.style.position = 'absolute'; // Position the corners if (i === 0) { corner.style.top = '10%'; corner.style.right = '10%'; } else { corner.style.bottom = '10%'; corner.style.left = '10%'; } corner.style.animationDelay = `${0.3 + Math.random() * 0.5}s`; circuitContainer.appendChild(corner); } // Event listeners for hover effects button.addEventListener('mouseenter', () => { // Stagger animation for the circuit lines button.querySelectorAll('.circuit-line').forEach((line, index) => { line.style.animationDelay = `${index * 0.1}s`; }); }); }); </script> </body> </html>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } :root { --primary: #ff6b35; --secondary: #2ec4b6; --accent: #f9cb40; --background: #fdfffc; --text: #011627; --shadow: rgba(1, 22, 39, 0.1); --transition-duration: 0.3s; } body { background-color: var(--background); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 700px; color: var(--text); padding: 20px; overflow-x: hidden; } .container { width: 100%; max-width: 660px; display: flex; flex-direction: column; gap: 40px; } .header { text-align: center; margin-bottom: 20px; } .header h1 { font-size: 2.5rem; margin-bottom: 16px; font-weight: 700; color: var(--text); background: linear-gradient(90deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .header p { font-size: 1.1rem; color: var(--text); opacity: 0.8; max-width: 580px; margin: 0 auto; line-height: 1.5; } .products { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 25px; } .product-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 30px var(--shadow); transition: transform var(--transition-duration) ease; position: relative; } .product-card:hover { transform: translateY(-8px); } .product-image { width: 100%; height: 150px; background-color: #f3f3f3; display: flex; align-items: center; justify-content: center; overflow: hidden; } .product-image img { width: 90%; height: 90%; object-fit: contain; transition: transform var(--transition-duration) ease; } .product-card:hover .product-image img { transform: scale(1.05); } .product-info { padding: 16px; } .product-name { font-weight: 600; font-size: 1rem; margin-bottom: 8px; color: var(--text); } .product-price { font-size: 1.1rem; font-weight: 700; color: var(--primary); margin-bottom: 16px; } .cta-section { text-align: center; padding: 40px 0; } .cta-text { margin-bottom: 24px; font-size: 1.2rem; color: var(--text); font-weight: 500; } .btn { position: relative; padding: 14px 28px; font-size: 1rem; font-weight: 600; border-radius: 8px; background-color: var(--primary); color: white; border: 2px solid var(--primary); cursor: pointer; transition: all var(--transition-duration) cubic-bezier(0.34, 1.56, 0.64, 1); overflow: hidden; z-index: 1; box-shadow: 0 4px 12px rgba(255, 107, 53, 0.25); outline: none; } .btn:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: white; transform: translateY(100%); transition: transform var(--transition-duration) cubic-bezier(0.34, 1.56, 0.64, 1); z-index: -1; } .btn:hover { color: var(--primary); transform: scale(1.05); box-shadow: 0 8px 24px rgba(255, 107, 53, 0.35); } .btn:hover:before { transform: translateY(0); } .btn:active { transform: scale(0.98); } .cart-btn { width: 100%; background-color: var(--secondary); border-color: var(--secondary); box-shadow: 0 4px 12px rgba(46, 196, 182, 0.25); display: flex; align-items: center; justify-content: center; gap: 8px; } .cart-btn:hover { color: var(--secondary); box-shadow: 0 8px 24px rgba(46, 196, 182, 0.35); } .cart-icon { width: 18px; height: 18px; transition: transform var(--transition-duration) ease; } .cart-btn:hover .cart-icon { transform: translateX(4px); } .badge-new { position: absolute; top: 10px; right: 10px; background-color: var(--accent); color: var(--text); font-size: 0.7rem; font-weight: 700; padding: 4px 8px; border-radius: 12px; z-index: 2; } .promo-banner { background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 12px; padding: 24px; color: white; position: relative; overflow: hidden; margin-bottom: 40px; } .promo-content { position: relative; z-index: 2; } .promo-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.1; background-image: linear-gradient(45deg, #fff 25%, transparent 25%), linear-gradient(-45deg, #fff 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #fff 75%), linear-gradient(-45deg, transparent 75%, #fff 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; } .promo-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; } .promo-text { margin-bottom: 16px; font-size: 1rem; opacity: 0.9; } .promo-btn { background-color: white; color: var(--primary); border: none; } .promo-btn:before { background-color: var(--accent); } .promo-btn:hover { color: var(--text); } @media (max-width: 600px) { .header h1 { font-size: 2rem; } .header p { font-size: 1rem; } .products { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; } .product-image { height: 120px; } .product-name { font-size: 0.9rem; } .product-price { font-size: 1rem; } .btn { padding: 12px 24px; font-size: 0.9rem; } } /* Animation for elements when they appear */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fadeInUp 0.6s ease forwards; } .product-card { opacity: 0; } .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; } .delay-5 { animation-delay: 0.5s; } .delay-6 { animation-delay: 0.6s; } </style> </head> <body> <div class="container"> <header class="header animate-in"> <h1>TrendMart</h1> <p>Discover curated products with our seamless shopping experience. Quick delivery, easy returns, and exceptional quality.</p> </header> <div class="promo-banner animate-in delay-1"> <div class="promo-pattern"></div> <div class="promo-content"> <h2 class="promo-title">Summer Flash Sale!</h2> <p class="promo-text">Enjoy 20% off all items with code SUMMER20 — Limited time only!</p> <button class="btn promo-btn">Shop the Sale</button> </div> </div> <section class="products"> <div class="product-card animate-in delay-2"> <div class="badge-new">NEW</div> <div class="product-image"> <img src="https://images.unsplash.com/photo-1594223274512-ad4803739b7c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=757&q=80" alt="Wireless earbuds"> </div> <div class="product-info"> <h3 class="product-name">SoundWave Pro Earbuds</h3> <p class="product-price">$89.99</p> <button class="btn cart-btn"> <svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M4.00436 6.41686L0.761719 3.17422L2.17593 1.76001L5.41857 5.00265H20.6603C21.2126 5.00265 21.6603 5.45037 21.6603 6.00265C21.6603 6.09851 21.6461 6.19397 21.618 6.28439L19.2682 13.5344C19.1302 13.9797 18.7204 14.2843 18.2546 14.2843H8.26395L8.50773 15.0683H18.6603V17.0683H7.00436C6.19893 17.0683 5.55436 16.354 5.64054 15.5546L6.20458 11.6186L3.00436 6.41686H4.00436ZM7.50436 19.0683C6.67593 19.0683 6.00436 19.7399 6.00436 20.5683C6.00436 21.3968 6.67593 22.0683 7.50436 22.0683C8.33279 22.0683 9.00436 21.3968 9.00436 20.5683C9.00436 19.7399 8.33279 19.0683 7.50436 19.0683ZM17.5044 19.0683C16.6759 19.0683 16.0044 19.7399 16.0044 20.5683C16.0044 21.3968 16.6759 22.0683 17.5044 22.0683C18.3328 22.0683 19.0044 21.3968 19.0044 20.5683C19.0044 19.7399 18.3328 19.0683 17.5044 19.0683Z"></path> </svg> Add to Cart </button> </div> </div> <div class="product-card animate-in delay-3"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="Smart watch"> </div> <div class="product-info"> <h3 class="product-name">FitTrack Smartwatch</h3> <p class="product-price">$129.99</p> <button class="btn cart-btn"> <svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M4.00436 6.41686L0.761719 3.17422L2.17593 1.76001L5.41857 5.00265H20.6603C21.2126 5.00265 21.6603 5.45037 21.6603 6.00265C21.6603 6.09851 21.6461 6.19397 21.618 6.28439L19.2682 13.5344C19.1302 13.9797 18.7204 14.2843 18.2546 14.2843H8.26395L8.50773 15.0683H18.6603V17.0683H7.00436C6.19893 17.0683 5.55436 16.354 5.64054 15.5546L6.20458 11.6186L3.00436 6.41686H4.00436ZM7.50436 19.0683C6.67593 19.0683 6.00436 19.7399 6.00436 20.5683C6.00436 21.3968 6.67593 22.0683 7.50436 22.0683C8.33279 22.0683 9.00436 21.3968 9.00436 20.5683C9.00436 19.7399 8.33279 19.0683 7.50436 19.0683ZM17.5044 19.0683C16.6759 19.0683 16.0044 19.7399 16.0044 20.5683C16.0044 21.3968 16.6759 22.0683 17.5044 22.0683C18.3328 22.0683 19.0044 21.3968 19.0044 20.5683C19.0044 19.7399 18.3328 19.0683 17.5044 19.0683Z"></path> </svg> Add to Cart </button> </div> </div> <div class="product-card animate-in delay-4"> <div class="badge-new">NEW</div> <div class="product-image"> <img src="https://images.unsplash.com/photo-1502920917128-1aa500764cbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Headphones"> </div> <div class="product-info"> <h3 class="product-name">AudioMax Headphones</h3> <p class="product-price">$159.99</p> <button class="btn cart-btn"> <svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M4.00436 6.41686L0.761719 3.17422L2.17593 1.76001L5.41857 5.00265H20.6603C21.2126 5.00265 21.6603 5.45037 21.6603 6.00265C21.6603 6.09851 21.6461 6.19397 21.618 6.28439L19.2682 13.5344C19.1302 13.9797 18.7204 14.2843 18.2546 14.2843H8.26395L8.50773 15.0683H18.6603V17.0683H7.00436C6.19893 17.0683 5.55436 16.354 5.64054 15.5546L6.20458 11.6186L3.00436 6.41686H4.00436ZM7.50436 19.0683C6.67593 19.0683 6.00436 19.7399 6.00436 20.5683C6.00436 21.3968 6.67593 22.0683 7.50436 22.0683C8.33279 22.0683 9.00436 21.3968 9.00436 20.5683C9.00436 19.7399 8.33279 19.0683 7.50436 19.0683ZM17.5044 19.0683C16.6759 19.0683 16.0044 19.7399 16.0044 20.5683C16.0044 21.3968 16.6759 22.0683 17.5044 22.0683C18.3328 22.0683 19.0044 21.3968 19.0044 20.5683C19.0044 19.7399 18.3328 19.0683 17.5044 19.0683Z"></path> </svg> Add to Cart </button> </div> </div> </section> <div class="cta-section animate-in delay-5"> <p class="cta-text">Ready to explore our full collection?</p> <button class="btn">Browse All Products</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Animate product cards on page load const productCards = document.querySelectorAll('.product-card'); productCards.forEach(card => { card.classList.add('animate-in'); }); // Ripple effect on buttons const buttons = document.querySelectorAll('.btn'); buttons.forEach(button => { button.addEventListener('click', function(e) { // Prevent any default form submission e.preventDefault(); // Create ripple effect const ripple = document.createElement('span'); const rect = button.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = e.clientX - rect.left - size / 2; const y = e.clientY - rect.top - size / 2; ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; ripple.classList.add('ripple'); // Remove existing ripples const currentRipple = button.querySelector('.ripple'); if (currentRipple) { currentRipple.remove(); } button.appendChild(ripple); // Remove the ripple after animation completes setTimeout(() => { ripple.remove(); }, 600); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Social Media Integration Buttons</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f5f8fa; padding: 20px; } .container { max-width: 650px; width: 100%; background-color: white; border-radius: 16px; padding: 40px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); text-align: center; } h1 { font-weight: 700; color: #1a2a3a; margin-bottom: 12px; font-size: 28px; } p { color: #5a6a7a; line-height: 1.6; margin-bottom: 30px; font-size: 16px; } .buttons-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 30px; } .social-button { position: relative; overflow: hidden; padding: 16px 32px; border: none; border-radius: 50px; font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; transition: transform 0.3s ease, box-shadow 0.3s ease; isolation: isolate; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .social-button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); } .social-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 70%); transform: translateX(-100%); transition: transform 0.6s ease; } .social-button:hover::before { transform: translateX(100%); } .social-button .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); transform: scale(0); animation: ripple 0.6s linear; z-index: -1; } .social-button i { margin-right: 10px; font-size: 20px; } .twitter { background: linear-gradient(45deg, #1DA1F2, #19b5fe); } .instagram { background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); } .facebook { background: linear-gradient(45deg, #3b5998, #4e69a2); } .tiktok { background: linear-gradient(45deg, #000000, #25F4EE 50%, #FE2C55); } .pinterest { background: linear-gradient(45deg, #bd081c, #e60023); } .linkedin { background: linear-gradient(45deg, #0077B5, #00a0dc); } .status-message { margin-top: 30px; color: #4caf50; font-weight: 500; padding: 16px; border-radius: 8px; background-color: rgba(76, 175, 80, 0.1); transform: translateY(20px); opacity: 0; transition: all 0.3s ease; } .status-message.show { transform: translateY(0); opacity: 1; } .decoration { position: absolute; pointer-events: none; z-index: -1; } .decoration.circle { width: 200px; height: 200px; border-radius: 50%; } .decoration.circle-1 { background: linear-gradient(135deg, rgba(29, 161, 242, 0.1), rgba(25, 181, 254, 0.1)); top: 10%; left: 10%; } .decoration.circle-2 { background: linear-gradient(135deg, rgba(225, 48, 108, 0.1), rgba(193, 53, 132, 0.1)); bottom: 10%; right: 10%; } @keyframes ripple { to { transform: scale(2.5); opacity: 0; } } @media (max-width: 480px) { .container { padding: 25px; } h1 { font-size: 24px; } .buttons-container { grid-template-columns: 1fr; } } </style> </head> <body> <div class="decoration circle circle-1"></div> <div class="decoration circle circle-2"></div> <div class="container"> <h1>Connect Your Content Everywhere</h1> <p>Share your products seamlessly across platforms with our intuitive social integration buttons. One tap unleashes your content to millions—watch your engagement skyrocket.</p> <div class="buttons-container"> <button class="social-button twitter"> <i class="fab fa-twitter"></i> Share on Twitter </button> <button class="social-button instagram"> <i class="fab fa-instagram"></i> Post to Instagram </button> <button class="social-button facebook"> <i class="fab fa-facebook-f"></i> Post on Facebook </button> <button class="social-button tiktok"> <i class="fab fa-tiktok"></i> Upload to TikTok </button> <button class="social-button pinterest"> <i class="fab fa-pinterest-p"></i> Pin It </button> <button class="social-button linkedin"> <i class="fab fa-linkedin-in"></i> Share on LinkedIn </button> </div> <div class="status-message" id="statusMessage"> Content ready to share! Click any button to connect. </div> </div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <script> document.addEventListener('DOMContentLoaded', function() { const buttons = document.querySelectorAll('.social-button'); const statusMessage = document.getElementById('statusMessage'); // Show status message with animation setTimeout(() => { statusMessage.classList.add('show'); }, 800); buttons.forEach(button => { button.addEventListener('click', function(e) { // Create ripple effect const ripple = document.createElement('span'); ripple.classList.add('ripple'); const rect = button.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; button.appendChild(ripple); // Remove ripple after animation completes setTimeout(() => { ripple.remove(); }, 600); // Update status message const platform = button.textContent.trim(); statusMessage.textContent = `Content being prepared for ${platform}`; statusMessage.style.color = '#4caf50'; statusMessage.style.backgroundColor = 'rgba(76, 175, 80, 0.1)'; // Simulate API connection delay setTimeout(() => { statusMessage.textContent = `Successfully connected to ${platform}!`; }, 1000); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mobile App Gateway</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 700px; background-color: #f5f8fd; padding: 20px; overflow-x: hidden; } .container { width: 100%; max-width: 660px; background: linear-gradient(135deg, #ffffff 0%, #f0f5ff 100%); border-radius: 24px; box-shadow: 0 10px 20px rgba(156, 184, 244, 0.1); padding: 40px 30px; position: relative; overflow: hidden; } .pattern { position: absolute; top: 0; right: 0; width: 180px; height: 180px; opacity: 0.04; pointer-events: none; } h1 { font-size: 28px; color: #2d3748; margin-bottom: 12px; font-weight: 600; } p { font-size: 16px; color: #718096; margin-bottom: 30px; line-height: 1.6; max-width: 90%; } .app-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 30px; } .app-button { position: relative; background-color: #fff; border-radius: 16px; height: 140px; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02); transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); overflow: hidden; } .app-button:active { transform: scale(0.96); } .app-button::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 16px; padding: 2px; background: linear-gradient(to right, transparent, transparent); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: background 0.3s ease; } .app-button:focus { outline: none; } .app-button:focus-visible { box-shadow: 0 0 0 2px #4e85fd; } .app-button.messaging::before { background: linear-gradient(45deg, #f9d7c3, #f5c0e5); } .app-button.photos::before { background: linear-gradient(45deg, #c3e8f9, #c0d5f5); } .app-button.maps::before { background: linear-gradient(45deg, #c3f9d7, #c0f5d5); } .app-button.notes::before { background: linear-gradient(45deg, #f9f3c3, #f5f0c0); } .icon { width: 48px; height: 48px; margin-bottom: 12px; position: relative; display: flex; align-items: center; justify-content: center; color: #4a5568; } .app-button.messaging .icon { color: #fc8181; background-color: rgba(252, 129, 129, 0.08); } .app-button.photos .icon { color: #4299e1; background-color: rgba(66, 153, 225, 0.08); } .app-button.maps .icon { color: #48bb78; background-color: rgba(72, 187, 120, 0.08); } .app-button.notes .icon { color: #ecc94b; background-color: rgba(236, 201, 75, 0.08); } .icon-bg { position: absolute; width: 36px; height: 36px; border-radius: 12px; transform: rotate(15deg); opacity: 0.4; transition: all 0.3s ease; z-index: -1; } .button-text { font-size: 15px; font-weight: 500; color: #2d3748; transition: transform 0.2s ease; } .button-hint { font-size: 12px; color: #a0aec0; margin-top: 5px; text-align: center; opacity: 0; transform: translateY(10px); transition: all 0.2s ease; } .app-button:hover, .app-button:focus { transform: scale(1.03); box-shadow: 0 8px 15px rgba(66, 153, 225, 0.1); } .app-button:hover .button-hint, .app-button:focus .button-hint { opacity: 1; transform: translateY(0); } .app-button:hover .icon-bg, .app-button:focus .icon-bg { transform: rotate(0deg) scale(1.2); } .access-button { display: block; width: 100%; background: linear-gradient(to right, #4e85fd, #5a9cfe); color: white; border: none; padding: 16px 24px; border-radius: 12px; font-size: 16px; font-weight: 500; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease; margin-top: 10px; } .access-button:hover, .access-button:focus { transform: scale(1.02); box-shadow: 0 8px 16px rgba(78, 133, 253, 0.25); } .access-button:active { transform: scale(0.98); } .access-button .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); transform: scale(0); animation: ripple 0.6s linear; } @keyframes ripple { to { transform: scale(2.5); opacity: 0; } } .touch-hint { display: flex; align-items: center; justify-content: center; margin-top: 25px; color: #a0aec0; font-size: 14px; } .touch-icon { width: 16px; height: 16px; margin-right: 8px; opacity: 0.7; } /* Responsive styles */ @media (max-width: 550px) { .container { padding: 30px 20px; } h1 { font-size: 24px; } p { font-size: 15px; margin-bottom: 25px; } .app-grid { grid-template-columns: 1fr; } .app-button { height: 110px; } } </style> </head> <body> <div class="container"> <svg class="pattern" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path fill="#4e85fd" d="M0 0h10v10H0zm20 0h10v10H20zm20 0h10v10H40zm20 0h10v10H60zm20 0h10v10H80zM10 10h10v10H10zm20 0h10v10H30zm20 0h10v10H50zm20 0h10v10H70zm20 0h10v10H90zM0 20h10v10H0zm20 0h10v10H20zm20 0h10v10H40zm20 0h10v10H60zm20 0h10v10H80zM10 30h10v10H10zm20 0h10v10H30zm20 0h10v10H50zm20 0h10v10H70zm20 0h10v10H90zM0 40h10v10H0zm20 0h10v10H20zm20 0h10v10H40zm20 0h10v10H60zm20 0h10v10H80zM10 50h10v10H10zm20 0h10v10H30zm20 0h10v10H50zm20 0h10v10H70zm20 0h10v10H90zM0 60h10v10H0zm20 0h10v10H20zm20 0h10v10H40zm20 0h10v10H60zm20 0h10v10H80zM10 70h10v10H10zm20 0h10v10H30zm20 0h10v10H50zm20 0h10v10H70zm20 0h10v10H90zM0 80h10v10H0zm20 0h10v10H20zm20 0h10v10H40zm20 0h10v10H60zm20 0h10v10H80zM10 90h10v10H10zm20 0h10v10H30zm20 0h10v10H50zm20 0h10v10H70zm20 0h10v10H90z"></path> </svg> <h1>Touch-optimized gateway</h1> <p>Access your essential mobile apps with finger-friendly navigation designed for fluid interactions and instant visual feedback.</p> <div class="app-grid"> <button class="app-button messaging" aria-label="Open Messaging App"> <div class="icon"> <div class="icon-bg"></div> <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path> </svg> </div> <span class="button-text">Messages</span> <span class="button-hint">12 new chats</span> </button> <button class="app-button photos" aria-label="Open Photos App"> <div class="icon"> <div class="icon-bg"></div> <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> <circle cx="8.5" cy="8.5" r="1.5"></circle> <polyline points="21 15 16 10 5 21"></polyline> </svg> </div> <span class="button-text">Photos</span> <span class="button-hint">128 recent images</span> </button> <button class="app-button maps" aria-label="Open Maps App"> <div class="icon"> <div class="icon-bg"></div> <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path> <circle cx="12" cy="10" r="3"></circle> </svg> </div> <span class="button-text">Maps</span> <span class="button-hint">Current location active</span> </button> <button class="app-button notes" aria-label="Open Notes App"> <div class="icon"> <div class="icon-bg"></div> <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> <polyline points="14 2 14 8 20 8"></polyline> <line x1="16" y1="13" x2="8" y2="13"></line> <line x1="16" y1="17" x2="8" y2="17"></line> <polyline points="10 9 9 9 8 9"></polyline> </svg> </div> <span class="button-text">Notes</span> <span class="button-hint">5 unfinished tasks</span> </button> </div> <button class="access-button" id="accessBtn" aria-label="Access All Applications"> Access all applications </button> <div class="touch-hint"> <svg class="touch-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M9 11.24V7.5a2.5 2.5 0 0 1 5 0v3.74"></path> <path d="M5 14l.5-.5A4.8 4.8 0 0 1 9 12h6a4.8 4.8 0 0 1 3.5 1.5l.5.5"></path> <polyline points="5 14 5 21 19 21 19 14"></polyline> </svg> Optimized for touch interactions </div> </div> <script> // Touch ripple effect for main button const accessBtn = document.getElementById('accessBtn'); accessBtn.addEventListener('click', function(e) { const button = e.currentTarget; // Create ripple element const ripple = document.createElement('span'); ripple.classList.add('ripple'); // Set position const rect = button.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); 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`; // Add to button button.appendChild(ripple); // Remove after animation setTimeout(() => { ripple.remove(); }, 600); }); // Enhanced hover interactions for app buttons const appButtons = document.querySelectorAll('.app-button'); appButtons.forEach(button => { // For accessibility - handle focus state similar to hover button.addEventListener('mouseenter', () => { vibrateIfSupported(10); }); button.addEventListener('touchstart', () => { vibrateIfSupported(10); }); // Add click interaction button.addEventListener('click', (e) => { const iconBg = button.querySelector('.icon-bg'); // Add quick pulse animation iconBg.style.transform = 'scale(1.5)'; setTimeout(() => { iconBg.style.transform = ''; }, 300); vibrateIfSupported(15); }); }); // Vibration API for tactile feedback if supported function vibrateIfSupported(duration) { if ('vibrate' in navigator) { navigator.vibrate(duration); } } </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Creative Portfolio Hover Effects</title> <style> @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700&family=Space+Grotesk:wght@400;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #FF3366; --secondary: #5D2BF0; --accent: #00EECC; --dark: #1A1A2E; --light: #F7F7FF; --transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } body { font-family: 'Space Grotesk', sans-serif; background-color: var(--dark); color: var(--light); line-height: 1.6; overflow-x: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #1A1A2E 0%, #16213E 100%); } .container { max-width: 680px; width: 100%; margin: 0 auto; padding: 2rem 1rem; position: relative; } header { margin-bottom: 2rem; position: relative; } h1 { font-family: 'Raleway', sans-serif; font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; position: relative; display: inline-block; } h1::after { content: ''; position: absolute; width: 60px; height: 4px; background: var(--accent); bottom: -10px; left: 0; } p { margin-bottom: 1.5rem; opacity: 0.9; max-width: 90%; font-size: 1.1rem; } .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .portfolio-button { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; aspect-ratio: 1 / 1; background-color: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; overflow: hidden; cursor: pointer; padding: 1.5rem; text-align: center; transition: transform var(--transition), box-shadow var(--transition); } .portfolio-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, var(--primary), var(--secondary)); opacity: 0; transition: opacity var(--transition); z-index: 1; } .portfolio-button::after { content: ''; position: absolute; top: 0; left: 0; width: calc(100% - 2px); height: calc(100% - 2px); margin: 1px; border-radius: 11px; background-color: var(--dark); z-index: 2; } .portfolio-button .content { position: relative; z-index: 3; transition: transform var(--transition); } .portfolio-button h3 { font-weight: 600; font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--light); } .portfolio-button p { font-size: 0.9rem; margin-bottom: 0; color: rgba(255, 255, 255, 0.7); } .portfolio-button .icon { font-size: 2rem; margin-bottom: 1rem; transition: transform var(--transition), color var(--transition); } .portfolio-button:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(93, 43, 240, 0.2); } .portfolio-button:hover::before { opacity: 1; } .portfolio-button:hover .content { transform: translateY(-2px); } .portfolio-button:hover .icon { transform: scale(1.1); color: var(--accent); } .border-animator { position: absolute; width: calc(100% - 2px); height: calc(100% - 2px); top: 1px; left: 1px; z-index: 4; border-radius: 11px; pointer-events: none; } .border-animator span { position: absolute; background: linear-gradient(90deg, var(--accent), var(--primary)); transition: transform var(--transition), opacity var(--transition); opacity: 0; } .border-animator span:nth-child(1), .border-animator span:nth-child(3) { width: 100%; height: 2px; transform: scaleX(0); } .border-animator span:nth-child(2), .border-animator span:nth-child(4) { width: 2px; height: 100%; transform: scaleY(0); } .border-animator span:nth-child(1) { top: 0; left: 0; transform-origin: left; } .border-animator span:nth-child(2) { top: 0; right: 0; transform-origin: top; } .border-animator span:nth-child(3) { bottom: 0; left: 0; transform-origin: right; } .border-animator span:nth-child(4) { top: 0; left: 0; transform-origin: bottom; } .portfolio-button:hover .border-animator span { opacity: 1; transform: scale(1); } .portfolio-button:hover .border-animator span:nth-child(1) { transition-delay: 0s; } .portfolio-button:hover .border-animator span:nth-child(2) { transition-delay: 0.1s; } .portfolio-button:hover .border-animator span:nth-child(3) { transition-delay: 0.2s; } .portfolio-button:hover .border-animator span:nth-child(4) { transition-delay: 0.3s; } .floating-shape { position: absolute; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 50%; filter: blur(30px); opacity: 0.1; z-index: -1; animation: float 8s infinite ease-in-out; } .shape1 { width: 150px; height: 150px; top: -60px; right: -60px; animation-delay: 0s; } .shape2 { width: 100px; height: 100px; bottom: 100px; left: -50px; animation-delay: 2s; } @keyframes float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.05); } } @media (max-width: 600px) { h1 { font-size: 2rem; } p { font-size: 1rem; } .portfolio-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1rem; } .portfolio-button { padding: 1rem; } .portfolio-button h3 { font-size: 0.9rem; } .portfolio-button p { font-size: 0.8rem; } .portfolio-button .icon { font-size: 1.5rem; margin-bottom: 0.5rem; } } /* Custom cursor */ .cursor { position: fixed; width: 20px; height: 20px; border-radius: 50%; background-color: var(--accent); pointer-events: none; mix-blend-mode: difference; transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s; z-index: 9999; opacity: 0; } .cursor.active { opacity: 0.6; width: 40px; height: 40px; } </style> </head> <body> <div class="cursor"></div> <div class="container"> <div class="floating-shape shape1"></div> <div class="floating-shape shape2"></div> <header> <h1>Artisanal Interactions</h1> <p>Explore my collection of handcrafted digital experiences where gradients meet motion and form creates function. Each project represents a unique blend of visual design and technical craft.</p> </header> <div class="portfolio-grid"> <div class="portfolio-button"> <div class="content"> <div class="icon">✦</div> <h3>Gradient Synthesis</h3> <p>Visual experiments with color theory</p> </div> <div class="border-animator"> <span></span> <span></span> <span></span> <span></span> </div> </div> <div class="portfolio-button"> <div class="content"> <div class="icon">◈</div> <h3>Motion Studies</h3> <p>Exploring the poetics of movement</p> </div> <div class="border-animator"> <span></span> <span></span> <span></span> <span></span> </div> </div> <div class="portfolio-button"> <div class="content"> <div class="icon">⦿</div> <h3>Interface Craft</h3> <p>Tactile digital experiences</p> </div> <div class="border-animator"> <span></span> <span></span> <span></span> <span></span> </div> </div> <div class="portfolio-button"> <div class="content"> <div class="icon">⟡</div> <h3>Responsive Art</h3> <p>Canvas-breaking digital designs</p> </div> <div class="border-animator"> <span></span> <span></span> <span></span> <span></span> </div> </div> <div class="portfolio-button"> <div class="content"> <div class="icon">⬢</div> <h3>Typographic Play</h3> <p>Words as visual elements</p> </div> <div class="border-animator"> <span></span> <span></span> <span></span> <span></span> </div> </div> <div class="portfolio-button"> <div class="content"> <div class="icon">⧫</div> <h3>Spatial Design</h3> <p>Exploring depth in flat interfaces</p> </div> <div class="border-animator"> <span></span> <span></span> <span></span> <span></span> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Custom cursor functionality const cursor = document.querySelector('.cursor'); const buttons = document.querySelectorAll('.portfolio-button'); document.addEventListener('mousemove', (e) => { cursor.style.opacity = '1'; cursor.style.left = `${e.clientX}px`; cursor.style.top = `${e.clientY}px`; }); document.addEventListener('mouseout', () => { cursor.style.opacity = '0'; }); buttons.forEach(button => { button.addEventListener('mouseenter', () => { cursor.classList.add('active'); }); button.addEventListener('mouseleave', () => { cursor.classList.remove('active'); }); // Add click effect without page navigation button.addEventListener('click', function(e) { e.preventDefault(); // Create ripple effect const ripple = document.createElement('div'); ripple.style.position = 'absolute'; ripple.style.borderRadius = '50%'; ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.3)'; ripple.style.width = '10px'; ripple.style.height = '10px'; ripple.style.transform = 'scale(0)'; ripple.style.animation = 'ripple 0.6s linear'; ripple.style.zIndex = '5'; // Calculate position relative to button const rect = button.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; button.appendChild(ripple); // Remove ripple after animation setTimeout(() => { ripple.remove(); }, 600); // Simulate navigation feedback const content = button.querySelector('.content'); content.style.transform = 'scale(0.95)'; setTimeout(() => { content.style.transform = ''; }, 200); }); }); // Add keyframes for ripple animation to the document const style = document.createElement('style'); style.innerHTML = ` @keyframes ripple { to { transform: scale(15); opacity: 0; } } `; document.head.appendChild(style); // Make buttons accessible for keyboard navigation buttons.forEach(button => { button.setAttribute('tabindex', '0'); button.setAttribute('role', 'button'); button.setAttribute('aria-label', button.querySelector('h3').textContent); button.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); button.click(); } }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --background: #070b15; --primary-neon: #00f0ff; --secondary-neon: #ff00e6; --tertiary-neon: #00ff8a; --button-bg: #0d1c33; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', 'Syncopate', sans-serif; } body { width: 100%; height: 100vh; background-color: var(--background); background-image: radial-gradient(circle at 10% 10%, rgba(0, 240, 255, 0.05) 0%, transparent 25%), radial-gradient(circle at 90% 90%, rgba(255, 0, 230, 0.05) 0%, transparent 25%), linear-gradient(45deg, rgba(0, 240, 255, 0.02) 0%, transparent 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; position: relative; } .grid-bg { position: absolute; width: 200%; height: 200%; background-image: linear-gradient(to right, rgba(13, 28, 51, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(13, 28, 51, 0.1) 1px, transparent 1px); background-size: 20px 20px; transform: perspective(500px) rotateX(60deg); top: -50%; left: -50%; opacity: 0.3; animation: gridMove 15s linear infinite; } @keyframes gridMove { 0% { background-position: 0 0; } 100% { background-position: 20px 20px; } } .container { position: relative; z-index: 10; max-width: 600px; padding: 30px; text-align: center; } h1 { font-size: 2.5rem; margin-bottom: 1.5rem; color: white; font-weight: 700; letter-spacing: 2px; position: relative; text-transform: uppercase; } h1::after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 100px; height: 3px; background: linear-gradient(90deg, var(--primary-neon), var(--secondary-neon)); transform: translateX(-50%); } p { color: rgba(255, 255, 255, 0.7); margin-bottom: 2.5rem; line-height: 1.6; font-size: 1.1rem; } .tech-btn { position: relative; padding: 15px 40px; background-color: var(--button-bg); color: white; border: none; border-radius: 4px; font-size: 1.1rem; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); outline: none; transform: translateZ(0); font-weight: 600; } .tech-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.05); transform: translateX(-100%) skewX(-15deg); transition: transform 0.4s cubic-bezier(0.3, 0.1, 0.3, 1); } .tech-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 5px var(--primary-neon), 0 0 15px rgba(0, 240, 255, 0.2); } .tech-btn:hover::before { transform: translateX(100%) skewX(-15deg); } .tech-btn:active { transform: translateY(1px); } .neon-trail { position: absolute; width: 5px; height: 5px; border-radius: 50%; background-color: var(--primary-neon); opacity: 0; pointer-events: none; z-index: -1; filter: blur(3px); } .button-container { position: relative; display: inline-block; margin-top: 20px; } .btn-glow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 4px; opacity: 0; transition: opacity 0.3s ease; z-index: -1; filter: blur(15px); background: radial-gradient( circle at center, var(--primary-neon) 0%, transparent 70% ); } .tech-btn:hover + .btn-glow { opacity: 0.5; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 0.7; } 100% { transform: scale(1); opacity: 0.5; } } .button-edge { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 4px; overflow: hidden; } .edge-top, .edge-right, .edge-bottom, .edge-left { position: absolute; background: linear-gradient(90deg, var(--primary-neon), var(--secondary-neon)); opacity: 0; transition: opacity 0.3s ease; } .edge-top, .edge-bottom { height: 2px; width: 100%; } .edge-right, .edge-left { width: 2px; height: 100%; } .edge-top { top: 0; left: 0; } .edge-right { top: 0; right: 0; } .edge-bottom { bottom: 0; left: 0; } .edge-left { top: 0; left: 0; } .tech-btn:hover ~ .button-edge .edge-top, .tech-btn:hover ~ .button-edge .edge-right, .tech-btn:hover ~ .button-edge .edge-bottom, .tech-btn:hover ~ .button-edge .edge-left { opacity: 1; } .edge-top { animation: edge-top-anim 2s infinite; } .edge-right { animation: edge-right-anim 2s 0.5s infinite; } .edge-bottom { animation: edge-bottom-anim 2s 1s infinite; } .edge-left { animation: edge-left-anim 2s 1.5s infinite; } @keyframes edge-top-anim { 0%, 100% { transform: translateX(-100%); opacity: 0; } 10%, 90% { opacity: 1; } 50% { transform: translateX(100%); opacity: 1; } } @keyframes edge-right-anim { 0%, 100% { transform: translateY(-100%); opacity: 0; } 10%, 90% { opacity: 1; } 50% { transform: translateY(100%); opacity: 1; } } @keyframes edge-bottom-anim { 0%, 100% { transform: translateX(100%); opacity: 0; } 10%, 90% { opacity: 1; } 50% { transform: translateX(-100%); opacity: 1; } } @keyframes edge-left-anim { 0%, 100% { transform: translateY(100%); opacity: 0; } 10%, 90% { opacity: 1; } 50% { transform: translateY(-100%); opacity: 1; } } .tech-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 40px; } .stat-item { background-color: rgba(13, 28, 51, 0.5); padding: 15px; border-radius: 8px; min-width: 120px; border-top: 1px solid rgba(0, 240, 255, 0.2); border-left: 1px solid rgba(0, 240, 255, 0.1); backdrop-filter: blur(5px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .stat-value { font-size: 1.8rem; font-weight: 700; color: white; margin-bottom: 5px; font-family: 'Syncopate', sans-serif; } .stat-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.6); } @media (max-width: 600px) { h1 { font-size: 1.8rem; } p { font-size: 1rem; margin-bottom: 2rem; } .tech-btn { padding: 12px 30px; font-size: 0.9rem; } .tech-stats { gap: 15px; } .stat-item { min-width: 100px; padding: 12px; } .stat-value { font-size: 1.5rem; } } </style> </head> <body> <div class="grid-bg"></div> <div class="container"> <h1>Neural Interface Hub</h1> <p>Access our cutting-edge neural link ecosystem, designed to enhance cognitive processing by 300% while reducing latency to sub-millisecond levels. Our quantum-encrypted protocols ensure unprecedented data security across all neural interfaces.</p> <div class="button-container"> <button class="tech-btn" id="techBtn">Synchronize Neural Link</button> <div class="btn-glow"></div> <div class="button-edge"> <div class="edge-top"></div> <div class="edge-right"></div> <div class="edge-bottom"></div> <div class="edge-left"></div> </div> </div> <div class="tech-stats"> <div class="stat-item"> <div class="stat-value">98.7%</div> <div class="stat-label">Sync Rate</div> </div> <div class="stat-item"> <div class="stat-value">0.3ms</div> <div class="stat-label">Latency</div> </div> <div class="stat-item"> <div class="stat-value">5.2M</div> <div class="stat-label">Active Users</div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const btn = document.getElementById('techBtn'); const colors = ['#00f0ff', '#ff00e6', '#00ff8a', '#ffe600']; let isHovering = false; // Create neon trails on hover btn.addEventListener('mousemove', function(e) { if (!isHovering) return; const rect = btn.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; for (let i = 0; i < 3; i++) { setTimeout(() => { createNeonTrail(x, y); }, i * 50); } }); btn.addEventListener('mouseenter', function() { isHovering = true; btn.style.boxShadow = `0 8px 25px rgba(0, 0, 0, 0.4), 0 0 5px var(--primary-neon), 0 0 15px rgba(0, 240, 255, 0.2)`; // Dynamic shadow effect let shadowColor = 0; const shadowInterval = setInterval(() => { shadowColor = (shadowColor + 1) % colors.length; btn.style.boxShadow = `0 8px 25px rgba(0, 0, 0, 0.4), 0 0 5px ${colors[shadowColor]}, 0 0 15px ${colors[shadowColor]}33`; }, 300); btn.setAttribute('data-interval', shadowInterval); }); btn.addEventListener('mouseleave', function() { isHovering = false; clearInterval(parseInt(btn.getAttribute('data-interval'))); btn.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.3)'; }); function createNeonTrail(x, y) { const trail = document.createElement('div'); trail.className = 'neon-trail'; // Randomize the trail color const randomColor = colors[Math.floor(Math.random() * colors.length)]; trail.style.backgroundColor = randomColor; trail.style.left = `${x}px`; trail.style.top = `${y}px`; btn.appendChild(trail); // Animate the trail let size = 2; let opacity = 0.8; let count = 0; const animate = setInterval(() => { size += 0.4; opacity -= 0.05; count++; trail.style.width = `${size}px`; trail.style.height = `${size}px`; trail.style.opacity = opacity; trail.style.transform = `translate(-50%, -50%) scale(${1 + count * 0.1})`; if (opacity <= 0) { clearInterval(animate); trail.remove(); } }, 20); } // Add button click effect that creates a ripple btn.addEventListener('click', function(e) { const rect = btn.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const ripple = document.createElement('div'); ripple.className = 'neon-trail'; ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.8)'; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; ripple.style.opacity = '0.8'; btn.appendChild(ripple); let size = 5; const maxSize = Math.max(btn.offsetWidth, btn.offsetHeight) * 2; let opacity = 0.8; const animate = setInterval(() => { size += 10; opacity -= 0.02; ripple.style.width = `${size}px`; ripple.style.height = `${size}px`; ripple.style.opacity = opacity; ripple.style.transform = 'translate(-50%, -50%)'; if (size >= maxSize || opacity <= 0) { clearInterval(animate); ripple.remove(); } }, 20); // Simulate button activation const statsItems = document.querySelectorAll('.stat-item'); statsItems.forEach((item, index) => { setTimeout(() => { item.style.boxShadow = `0 0 15px var(--primary-neon)`; setTimeout(() => { item.style.boxShadow = ''; }, 800); }, index * 200); }); }); // Add flickering effect to stats const statsValues = document.querySelectorAll('.stat-value'); statsValues.forEach(value => { const originalText = value.textContent; let isFlickering = false; setInterval(() => { // Only flicker occasionally if (Math.random() > 0.95 && !isFlickering) { isFlickering = true; let counter = 0; const flickerInterval = setInterval(() => { if (counter % 2 === 0) { value.style.opacity = '0.5'; value.style.textShadow = 'none'; } else { value.style.opacity = '1'; value.style.textShadow = '0 0 5px var(--primary-neon)'; } counter++; if (counter > 5) { clearInterval(flickerInterval); value.style.opacity = '1'; value.style.textShadow = 'none'; isFlickering = false; } }, 100); } }, 2000); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary-dark: #162842; --primary: #1c3a5e; --primary-light: #2a4e7a; --accent: #4d88c8; --grey-dark: #333f4d; --grey: #5b6b7b; --grey-light: #d7e1ed; --white: #ffffff; --shadow: rgba(22, 40, 66, 0.15); --success: #2e7d32; --warning: #f9a825; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; } body { background: linear-gradient(145deg, #f8fafd 0%, #eef4fa 100%); min-height: 700px; display: flex; justify-content: center; align-items: center; padding: 20px; color: var(--grey-dark); } .app { background: var(--white); width: 100%; max-width: 640px; border-radius: 16px; box-shadow: 0 12px 32px var(--shadow); overflow: hidden; } .app-header { background: linear-gradient(120deg, var(--primary) 0%, var(--primary-dark) 100%); padding: 24px 30px; color: var(--white); position: relative; } .header-glow { position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(77, 136, 200, 0.3) 0%, rgba(28, 58, 94, 0) 70%); border-radius: 50%; } .logo { display: flex; align-items: center; margin-bottom: 16px; } .logo-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); display: flex; justify-content: center; align-items: center; margin-right: 12px; position: relative; overflow: hidden; } .logo-icon:before { content: ""; position: absolute; width: 20px; height: 8px; background: var(--white); border-radius: 4px; top: 11px; } .logo-icon:after { content: ""; position: absolute; width: 8px; height: 16px; background: var(--white); border-radius: 4px; bottom: 4px; left: 11px; } .logo-text { font-weight: 600; font-size: 20px; letter-spacing: -0.5px; } .app-header h1 { font-size: 24px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.5px; } .app-header p { font-size: 15px; opacity: 0.9; line-height: 1.5; max-width: 450px; } .app-content { padding: 30px; } .section { margin-bottom: 30px; } .section-title { font-size: 16px; font-weight: 600; color: var(--grey-dark); margin-bottom: 16px; display: flex; align-items: center; } .section-title .icon { display: inline-flex; width: 18px; height: 18px; margin-right: 8px; opacity: 0.8; } .account-summary { background: var(--grey-light); border-radius: 12px; padding: 20px; display: flex; justify-content: space-between; align-items: center; } .account-balance { flex: 1; } .account-label { font-size: 13px; color: var(--grey); margin-bottom: 6px; } .account-amount { font-size: 28px; font-weight: 700; color: var(--primary-dark); letter-spacing: -0.5px; } .account-details { font-size: 13px; color: var(--grey); margin-top: 6px; } .status-indicator { background: var(--grey-light); border-radius: 20px; padding: 4px 10px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; } .status-indicator.positive { background: rgba(46, 125, 50, 0.15); color: var(--success); } .status-indicator.positive:before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--success); margin-right: 6px; } .action-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; } .btn { position: relative; background: var(--white); border: 1px solid var(--grey-light); border-radius: 10px; padding: 12px 20px; font-size: 14px; font-weight: 500; color: var(--grey-dark); cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03); display: flex; flex-direction: column; align-items: center; justify-content: center; outline: none; height: 88px; } .btn .btn-icon { margin-bottom: 8px; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; background: var(--grey-light); border-radius: 6px; color: var(--primary); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(120deg, var(--primary-light) 0%, var(--primary) 100%); opacity: 0; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; } .btn > span { position: relative; z-index: 2; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .btn:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(28, 58, 94, 0.15); } .btn:hover::after { opacity: 0.07; } .btn:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(28, 58, 94, 0.2); } .btn-primary { background: var(--primary); color: var(--white); border-color: var(--primary); height: auto; padding: 14px 20px; margin-top: 8px; } .btn-primary .btn-icon { background: rgba(255, 255, 255, 0.2); color: var(--white); } .btn-primary::after { background: linear-gradient(120deg, var(--primary-light) 0%, var(--primary) 100%); } .btn-primary:hover { background: var(--primary-light); border-color: var(--primary-light); } .btn-primary:hover::after { opacity: 0.15; } .transactions-list { margin-top: 16px; } .transaction-item { display: flex; align-items: center; padding: 12px 16px; border-radius: 10px; transition: background 0.2s; cursor: pointer; } .transaction-item:hover { background: var(--grey-light); } .transaction-icon { width: 40px; height: 40px; border-radius: 8px; background: var(--grey-light); display: flex; justify-content: center; align-items: center; margin-right: 16px; } .transaction-icon.deposit { background: rgba(46, 125, 50, 0.15); color: var(--success); } .transaction-icon.withdrawal { background: rgba(249, 168, 37, 0.15); color: var(--warning); } .transaction-details { flex: 1; } .transaction-title { font-weight: 500; margin-bottom: 4px; } .transaction-meta { font-size: 13px; color: var(--grey); } .transaction-amount { font-weight: 600; } .transaction-amount.positive { color: var(--success); } .transaction-amount.negative { color: var(--grey-dark); } @media (max-width: 500px) { .app-header { padding: 20px; } .app-content { padding: 20px; } .account-amount { font-size: 24px; } .action-buttons { grid-template-columns: repeat(2, 1fr); } .btn { padding: 10px 16px; height: 80px; } .transaction-item { padding: 10px; } } </style> </head> <body> <div class="app"> <div class="app-header"> <div class="header-glow"></div> <div class="logo"> <div class="logo-icon"></div> <div class="logo-text">SecureBank</div> </div> <h1>Financial Management Dashboard</h1> <p>Welcome back. Your financial stability is our top priority.</p> </div> <div class="app-content"> <div class="section"> <div class="section-title"> <svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 14.5V16.5M7 10.5H17M5.26 18.5H18.74C19.87 18.5 20.5 17.784 20.5 16.85V7.15C20.5 6.216 19.87 5.5 18.74 5.5H5.26C4.13 5.5 3.5 6.216 3.5 7.15V16.85C3.5 17.784 4.13 18.5 5.26 18.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> Current Account Overview </div> <div class="account-summary"> <div class="account-balance"> <div class="account-label">Available Balance</div> <div class="account-amount">$24,568.72</div> <div class="account-details">Last updated: Today at 10:42 AM</div> </div> <div class="status-indicator positive">Active</div> </div> <div class="action-buttons"> <button class="btn"> <div class="btn-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.5 13.75C9.5 14.72 10.25 15.5 11.17 15.5H13.05C13.85 15.5 14.5 14.82 14.5 13.97C14.5 13.06 14.1 12.73 13.51 12.52L10.5 11.47C9.91 11.26 9.51001 10.94 9.51001 10.02C9.51001 9.18 10.16 8.49 10.96 8.49H12.84C13.76 8.49 14.51 9.27 14.51 10.24M12 7.5V16.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2C17.52 2 22 6.48 22 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span>Send Money</span> </button> <button class="btn"> <div class="btn-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.5 13.75C9.5 14.72 10.25 15.5 11.17 15.5H13.05C13.85 15.5 14.5 14.82 14.5 13.97C14.5 13.06 14.1 12.73 13.51 12.52L10.5 11.47C9.91 11.26 9.51001 10.94 9.51001 10.02C9.51001 9.18 10.16 8.49 10.96 8.49H12.84C13.76 8.49 14.51 9.27 14.51 10.24M12 7.5V16.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2 12H22M22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2C17.52 2 22 6.48 22 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span>Deposit</span> </button> <button class="btn"> <div class="btn-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M22 6V8.42C22 10 21 11 19.42 11H16V4.01C16 2.9 16.91 2 18.02 2C19.11 2.01 20.11 2.45 20.83 3.17C21.55 3.9 22 4.9 22 6Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2 7V21C2 21.83 2.93998 22.3 3.59998 21.8L5.31 20.52C5.71 20.22 6.27 20.26 6.63 20.62L8.28998 22.29C8.67998 22.68 9.32002 22.68 9.71002 22.29L11.39 20.61C11.74 20.26 12.3 20.22 12.69 20.52L14.4 21.8C15.06 22.29 16 21.82 16 21V4C16 2.9 16.9 2 18 2H7H6C3 2 2 3.79 2 6V7Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9 13.01H12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9 9.01001H12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5.99561 13H6.00459" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5.99561 9H6.00459" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span>Statements</span> </button> </div> </div> <div class="section"> <div class="section-title"> <svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3.16992 7.44L11.9999 12.55L20.7699 7.47M11.9999 21.61V12.54" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9.93011 2.48L4.59012 5.45C3.38012 6.12 2.39014 7.8 2.39014 9.18V14.83C2.39014 16.21 3.38012 17.89 4.59012 18.56L9.93011 21.53C11.0701 22.16 12.9401 22.16 14.0801 21.53L19.4201 18.56C20.6301 17.89 21.6201 16.21 21.6201 14.83V9.18C21.6201 7.8 20.6301 6.12 19.4201 5.45L14.0801 2.48C12.9301 1.84 11.0701 1.84 9.93011 2.48Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> Recent Transactions </div> <div class="transactions-list"> <div class="transaction-item"> <div class="transaction-icon deposit"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2V7M12 7L9 4M12 7L15 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2 13C2 8.5 4 7 7 7H17C20 7 22 8.5 22 13V17C22 20.5 20 22 17 22H7C4 22 2 20.5 2 17V13Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M22 13V17C22 20.5 20 22 17 22H7C4 22 2 20.5 2 17V13C2 8.5 4 7 7 7H17C20 7 22 8.5 22 13Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="transaction-details"> <div class="transaction-title">Salary Deposit</div> <div class="transaction-meta">Oct 15, 2023 • Employer Inc.</div> </div> <div class="transaction-amount positive">+$3,250.00</div> </div> <div class="transaction-item"> <div class="transaction-icon withdrawal"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.5 13.75C9.5 14.72 10.25 15.5 11.17 15.5H13.05C13.85 15.5 14.5 14.82 14.5 13.97C14.5 13.06 14.1 12.73 13.51 12.52L10.5 11.47C9.91 11.26 9.51001 10.94 9.51001 10.02C9.51001 9.18 10.16 8.49 10.96 8.49H12.84C13.76 8.49 14.51 9.27 14.51 10.24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 7.5V16.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2C17.52 2 22 6.48 22 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="transaction-details"> <div class="transaction-title">Mortgage Payment</div> <div class="transaction-meta">Oct 12, 2023 • HomeFinance Ltd.</div> </div> <div class="transaction-amount negative">-$1,458.33</div> </div> <div class="transaction-item"> <div class="transaction-icon withdrawal"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M14.5 8C13.67 7.5 12.5 7.5 12 7.5C10.5 7.5 9.5 8.2 9.5 9C9.5 10 11 10.5 12.5 11C14 11.5 15.5 12 15.5 13.5C15.5 14.8 14 15.5 12.5 15.5C11.5 15.5 10.17 15.3 9.5 14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="transaction-details"> <div class="transaction-title">Investment Contribution</div> <div class="transaction-meta">Oct 10, 2023 • Global Investments</div> </div> <div class="transaction-amount negative">-$750.00</div> </div> </div> <button class="btn btn-primary"> <span>View All Transactions</span> </button> </div> </div> </div> <script> // Enhanced hover effects for buttons const buttons = document.querySelectorAll('.btn'); buttons.forEach(button => { button.addEventListener('mouseover', function() { // Create subtle animation for icon const icon = this.querySelector('.btn-icon'); if (icon) { icon.style.transform = 'scale(1.08)'; // Primary buttons have different styling if (this.classList.contains('btn-primary')) { icon.style.background = 'rgba(255, 255, 255, 0.25)'; } else { icon.style.background = `var(--primary-light)`; icon.style.color = 'var(--white)'; } } }); button.addEventListener('mouseout', function() { const icon = this.querySelector('.btn-icon'); if (icon) { icon.style.transform = 'scale(1)'; if (this.classList.contains('btn-primary')) { icon.style.background = 'rgba(255, 255, 255, 0.2)'; } else { icon.style.background = 'var(--grey-light)'; icon.style.color = 'var(--primary)'; } } }); // Add subtle click animation button.addEventListener('mousedown', function() { this.style.transform = 'scale(0.98)'; }); button.addEventListener('mouseup', function() { this.style.transform = 'scale(1)'; }); }); // Transaction item interactions const transactionItems = document.querySelectorAll('.transaction-item'); transactionItems.forEach(item => { item.addEventListener('click', function() { // Simulate selection without navigating away transactionItems.forEach(i => i.style.background = ''); this.style.background = 'var(--grey-light)'; // Subtle feedback animation this.style.transform = 'translateX(4px)'; setTimeout(() => { this.style.transform = 'translateX(0)'; }, 200); }); }); // Simulate real-time updates let balance = 24568.72; setInterval(() => { // Small random fluctuations to simulate real-time activity const change = (Math.random() - 0.5) * 2; balance += change; // Update the displayed balance with subtle animation const balanceElement = document.querySelector('.account-amount'); balanceElement.style.transition = 'color 0.3s'; balanceElement.style.color = change >= 0 ? 'var(--primary-dark)' : 'var(--grey-dark)'; balanceElement.textContent = `$${balance.toFixed(2)}`; setTimeout(() => { balanceElement.style.color = 'var(--primary-dark)'; }, 500); }, 30000); // Update every 30 seconds </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Globe | News That Matters</title> <style> :root { --primary: #1a1a2e; --secondary: #16213e; --accent: #e94560; --text: #f0f0f0; --text-dark: #1a1a2e; --button-hover: rgba(233, 69, 96, 0.1); --transition: 0.25s cubic-bezier(0.25, 1, 0.5, 1); --border-radius: 4px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--primary); color: var(--text); line-height: 1.6; font-size: 16px; width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 2rem 1rem; overflow-x: hidden; } header { width: 100%; max-width: 660px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(240, 240, 240, 0.1); } .logo { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.5px; color: var(--text); display: flex; align-items: center; } .logo-icon { display: inline-block; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--accent); margin-right: 0.5rem; position: relative; overflow: hidden; } .logo-icon:after { content: ''; position: absolute; top: 50%; left: 50%; width: 70%; height: 70%; border-radius: 50%; background: var(--primary); transform: translate(-50%, -50%); } main { width: 100%; max-width: 660px; display: flex; flex-direction: column; flex-grow: 1; } .breaking-news { background-color: var(--secondary); padding: 1.25rem; border-radius: var(--border-radius); margin-bottom: 1.5rem; position: relative; overflow: hidden; } .breaking-news-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 0.5rem; display: flex; align-items: center; } .breaking-news-label::before { content: ''; display: inline-block; width: 8px; height: 8px; background-color: var(--accent); border-radius: 50%; margin-right: 0.5rem; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(233, 69, 96, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(233, 69, 96, 0); } } .breaking-news h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.75rem; } .breaking-news p { color: rgba(240, 240, 240, 0.8); font-size: 0.95rem; margin-bottom: 1.25rem; } .nav-button { display: inline-block; padding: 0.6rem 1.2rem; font-weight: 600; font-size: 0.9rem; color: var(--text); background-color: transparent; border-radius: var(--border-radius); text-decoration: none; position: relative; transition: var(--transition); cursor: pointer; outline: none; border: none; } .nav-button::after { content: ''; position: absolute; bottom: 0.4rem; left: 1.2rem; width: 0; height: 2px; background-color: var(--accent); transition: var(--transition); } .nav-button:hover { background-color: var(--button-hover); } .nav-button:hover::after { width: calc(100% - 2.4rem); } .news-categories { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } .category-button { display: inline-block; padding: 0.5rem 1rem; font-weight: 600; font-size: 0.85rem; color: var(--text); background-color: var(--secondary); border-radius: var(--border-radius); text-decoration: none; position: relative; transition: var(--transition); cursor: pointer; outline: none; border: none; overflow: hidden; } .category-button::after { content: ''; position: absolute; bottom: 0.35rem; left: 1rem; width: 0; height: 2px; background-color: var(--accent); transition: var(--transition); } .category-button:hover { background-color: var(--button-hover); } .category-button:hover::after { width: calc(100% - 2rem); } .featured-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; } .article-card { background-color: var(--secondary); border-radius: var(--border-radius); overflow: hidden; transition: transform 0.3s ease; } .article-card:hover { transform: translateY(-4px); } .article-image { width: 100%; height: 140px; background-size: cover; background-position: center; } .article-content { padding: 1.25rem; } .article-category { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--accent); letter-spacing: 0.05em; margin-bottom: 0.5rem; display: inline-block; } .article-title { font-size: 1.1rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.5rem; } .article-preview { font-size: 0.9rem; color: rgba(240, 240, 240, 0.7); margin-bottom: 1rem; } .read-more { display: inline-block; font-weight: 600; font-size: 0.85rem; color: var(--accent); text-decoration: none; position: relative; padding-right: 1.5rem; transition: var(--transition); } .read-more::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: var(--accent); transition: var(--transition); } .read-more:hover::after { width: calc(100% - 1.5rem); } .read-more::before { content: '→'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: var(--transition); } .read-more:hover::before { right: -3px; } @media (max-width: 660px) { .featured-articles { grid-template-columns: 1fr; } .breaking-news h2 { font-size: 1.3rem; } .nav-button { padding: 0.5rem 1rem; font-size: 0.85rem; } .nav-button::after { bottom: 0.35rem; left: 1rem; } .nav-button:hover::after { width: calc(100% - 2rem); } } </style> </head> <body> <header> <div class="logo"> <span class="logo-icon"></span> Globe </div> <nav> <button class="nav-button">Login</button> <button class="nav-button">Subscribe</button> </nav> </header> <main> <section class="breaking-news"> <div class="breaking-news-label">Breaking News</div> <h2>Global Climate Summit Results in Landmark Carbon Neutrality Agreement</h2> <p>195 nations have committed to a binding timeline for carbon neutrality by 2045, marking the most ambitious climate agreement to date. The accord includes mechanisms for technology transfer and financial support for developing economies.</p> <button class="category-button">Full Coverage</button> </section> <section class="news-categories"> <button class="category-button">World</button> <button class="category-button">Politics</button> <button class="category-button">Business</button> <button class="category-button">Technology</button> <button class="category-button">Science</button> <button class="category-button">Culture</button> </section> <section class="featured-articles"> <div class="article-card"> <div class="article-image" style="background-image: url('https://images.unsplash.com/photo-1624438253998-7bb8eca8a3f0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dGVjaG5vbG9neXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60');"></div> <div class="article-content"> <span class="article-category">Technology</span> <h3 class="article-title">Quantum Computing Breakthrough Promises New Era of Data Security</h3> <p class="article-preview">Researchers have achieved stable quantum entanglement at room temperature, potentially revolutionizing encryption methods.</p> <a href="#" class="read-more">Continue reading</a> </div> </div> <div class="article-card"> <div class="article-image" style="background-image: url('https://images.unsplash.com/photo-1607944024060-0450380ddd33?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8cG9saXRpY3N8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60');"></div> <div class="article-content"> <span class="article-category">Politics</span> <h3 class="article-title">Electoral Reform Bill Clears Final Senate Hurdle After Marathon Debate</h3> <p class="article-preview">The comprehensive voting rights legislation introduces automatic registration and increases polling access nationwide.</p> <a href="#" class="read-more">Continue reading</a> </div> </div> </section> </main> <script> // Handle category button clicks document.querySelectorAll('.category-button').forEach(button => { button.addEventListener('click', () => { // Remove active class from all buttons document.querySelectorAll('.category-button').forEach(btn => { btn.classList.remove('active'); }); // Add active class to clicked button button.classList.add('active'); // In a real app, this would filter content based on category console.log(`Category selected: ${button.textContent}`); }); }); // Smooth scroll behavior document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Prevent default form submission document.addEventListener('submit', event => { event.preventDefault(); console.log('Form submission prevented'); }); // Prevent page navigation document.querySelectorAll('a').forEach(link => { link.addEventListener('click', event => { if (!link.getAttribute('href').startsWith('#')) { event.preventDefault(); console.log('External navigation prevented'); } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LearnSpark Educational Platform</title> <style> :root { --primary: #ff7e5f; --primary-light: #ffa78c; --secondary: #feb47b; --tertiary: #ffcf9c; --dark: #2c3e50; --light: #f7f9fc; --shadow: rgba(0, 0, 0, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light); height: 100vh; display: flex; align-items: center; justify-content: center; overflow-x: hidden; color: var(--dark); } .container { max-width: 680px; width: 90%; padding: 2rem; background: linear-gradient(145deg, #ffffff, #f0f0f0); border-radius: 16px; box-shadow: 0 12px 30px var(--shadow); text-align: center; position: relative; overflow: hidden; } h1 { font-size: 2.2rem; margin-bottom: 1rem; color: var(--dark); position: relative; display: inline-block; } h1::after { content: ''; position: absolute; bottom: -5px; left: 10%; width: 80%; height: 3px; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 2px; } p { font-size: 1.1rem; line-height: 1.6; margin-bottom: 2rem; color: var(--dark); opacity: 0.9; } .button-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; margin-bottom: 2rem; } .btn { position: relative; padding: 0.8rem 1.6rem; border-radius: 8px; font-size: 1rem; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; overflow: hidden; transition: all 0.3s ease; background-color: var(--primary); color: white; border: none; box-shadow: 0 4px 15px rgba(255, 126, 95, 0.3); z-index: 1; } .btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(120deg, var(--secondary), var(--primary)); opacity: 0; z-index: -1; transition: opacity 0.3s ease; } .btn:hover::before { opacity: 1; } .btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 7px 20px rgba(255, 126, 95, 0.4); } .btn:active { transform: translateY(0) scale(0.98); box-shadow: 0 2px 10px rgba(255, 126, 95, 0.3); } .learning-path { margin-top: 2.5rem; background: rgba(255, 255, 255, 0.7); border-radius: 12px; padding: 1.5rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .learning-path:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } .learning-path h3 { font-size: 1.3rem; margin-bottom: 1rem; color: var(--primary); } .learning-path-steps { display: flex; justify-content: space-between; margin-top: 1rem; position: relative; } .learning-path-steps::before { content: ''; position: absolute; top: 25px; left: 10%; right: 10%; height: 3px; background: linear-gradient(90deg, var(--primary-light), var(--tertiary)); z-index: 0; } .step { position: relative; z-index: 1; width: 60px; text-align: center; } .step-icon { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(145deg, var(--primary-light), var(--primary)); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: white; font-weight: bold; box-shadow: 0 4px 10px rgba(255, 126, 95, 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; } .step:hover .step-icon { transform: scale(1.1) translateY(-3px); box-shadow: 0 6px 15px rgba(255, 126, 95, 0.4); } .step-label { font-size: 0.85rem; font-weight: 500; color: var(--dark); } .pattern { position: absolute; width: 150px; height: 150px; background: radial-gradient(circle, var(--tertiary) 10%, transparent 10%), radial-gradient(circle, var(--tertiary) 10%, transparent 10%); background-size: 30px 30px; background-position: 0 0, 15px 15px; opacity: 0.1; z-index: -1; } .pattern-1 { top: -50px; right: -50px; transform: rotate(15deg); } .pattern-2 { bottom: -50px; left: -50px; transform: rotate(-15deg); } @media (max-width: 600px) { h1 { font-size: 1.8rem; } p { font-size: 1rem; } .button-container { flex-direction: column; align-items: center; gap: 1rem; } .btn { width: 80%; } .learning-path-steps { flex-wrap: wrap; justify-content: center; gap: 1rem; } .learning-path-steps::before { display: none; } .step { margin-bottom: 1rem; } } </style> </head> <body> <div class="container"> <div class="pattern pattern-1"></div> <div class="pattern pattern-2"></div> <h1>LearnSpark Academy</h1> <p>Ignite your curiosity with our interactive learning modules designed for all learning styles. Select a pathway that speaks to your educational goals.</p> <div class="button-container"> <button class="btn" id="courses-btn">Explore Courses</button> <button class="btn" id="workshop-btn">Join Workshops</button> <button class="btn" id="resource-btn">Access Resources</button> </div> <div class="learning-path"> <h3>Your Learning Journey</h3> <p>Track your progress through our personalized learning paths. Each step brings you closer to mastery.</p> <div class="learning-path-steps"> <div class="step"> <div class="step-icon">1</div> <div class="step-label">Discover</div> </div> <div class="step"> <div class="step-icon">2</div> <div class="step-label">Learn</div> </div> <div class="step"> <div class="step-icon">3</div> <div class="step-label">Practice</div> </div> <div class="step"> <div class="step-icon">4</div> <div class="step-label">Master</div> </div> </div> </div> </div> <script> // Button hover animation enhancement const buttons = document.querySelectorAll('.btn'); buttons.forEach(button => { button.addEventListener('mouseenter', () => { // Create bouncing animation button.animate([ { transform: 'translateY(0) scale(1)' }, { transform: 'translateY(-5px) scale(1.03)' }, { transform: 'translateY(-3px) scale(1.03)' } ], { duration: 300, easing: 'ease-out', fill: 'forwards' }); }); button.addEventListener('mouseleave', () => { button.animate([ { transform: 'translateY(-3px) scale(1.03)' }, { transform: 'translateY(0) scale(1)' } ], { duration: 300, easing: 'ease-in', fill: 'forwards' }); }); // Button click effect button.addEventListener('click', (e) => { // Create ripple effect const ripple = document.createElement('span'); ripple.classList.add('ripple'); const x = e.clientX - e.target.getBoundingClientRect().left; const y = e.clientY - e.target.getBoundingClientRect().top; ripple.style.cssText = ` position: absolute; background: rgba(255,255,255,0.7); border-radius: 50%; pointer-events: none; width: 10px; height: 10px; left: ${x}px; top: ${y}px; transform: scale(0); opacity: 1; `; button.appendChild(ripple); // Animate ripple ripple.animate([ { transform: 'scale(0)', opacity: 1 }, { transform: 'scale(20)', opacity: 0 } ], { duration: 600, easing: 'ease-out' }); // Clean up the ripple element setTimeout(() => { ripple.remove(); }, 600); // Show custom tooltip based on button clicked showTooltip(button.id); }); }); function showTooltip(buttonId) { // Remove any existing tooltips const existingTooltip = document.querySelector('.tooltip'); if (existingTooltip) { existingTooltip.remove(); } // Create tooltip with content based on button clicked const tooltip = document.createElement('div'); tooltip.classList.add('tooltip'); let content = ''; switch(buttonId) { case 'courses-btn': content = '📚 Over 200 interactive courses tailored to your learning pace'; break; case 'workshop-btn': content = '👥 Live workshops with industry experts every Tuesday and Thursday'; break; case 'resource-btn': content = '📝 Downloadable guides, practice exercises, and study materials'; break; default: content = 'Click to explore more features'; } tooltip.textContent = content; // Style the tooltip tooltip.style.cssText = ` position: absolute; top: 60%; left: 50%; transform: translateX(-50%); background: var(--dark); color: white; padding: 0.7rem 1.2rem; border-radius: 8px; font-size: 0.9rem; max-width: 90%; box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 100; text-align: center; opacity: 0; `; document.querySelector('.container').appendChild(tooltip); // Animate the tooltip tooltip.animate([ { opacity: 0, transform: 'translate(-50%, 10px)' }, { opacity: 1, transform: 'translate(-50%, 0)' } ], { duration: 300, easing: 'ease-out', fill: 'forwards' }); // Remove tooltip after delay setTimeout(() => { tooltip.animate([ { opacity: 1, transform: 'translate(-50%, 0)' }, { opacity: 0, transform: 'translate(-50%, -10px)' } ], { duration: 300, easing: 'ease-in', fill: 'forwards' }); setTimeout(() => { tooltip.remove(); }, 300); }, 3000); } // Step hover animation const steps = document.querySelectorAll('.step'); steps.forEach(step => { step.addEventListener('mouseenter', () => { const stepLabel = step.querySelector('.step-label'); stepLabel.animate([ { transform: 'translateY(0)', color: 'var(--dark)' }, { transform: 'translateY(-3px)', color: 'var(--primary)' } ], { duration: 200, fill: 'forwards' }); }); step.addEventListener('mouseleave', () => { const stepLabel = step.querySelector('.step-label'); stepLabel.animate([ { transform: 'translateY(-3px)', color: 'var(--primary)' }, { transform: 'translateY(0)', color: 'var(--dark)' } ], { duration: 200, fill: 'forwards' }); }); }); </script> </body> </html>
