Social share buttons are essential tools for enhancing user engagement and driving traffic to your content. They provide a seamless way for visitors to share your articles, products, or services across various social media platforms.
In this article, we will explore 10 exemplary social share button designs that can inspire you to boost your online presence. These examples showcase a range of styles and functionalities to suit different website aesthetics and user preferences.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers love Subframe for its drag-and-drop interface and intuitive, responsive canvas, making it easy to create pixel-perfect UI every time. Whether you're crafting social share buttons or any other UI component, Subframe ensures a seamless design experience.
Start for free and see why Subframe is the go-to tool for professionals.
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 interfaces, including social share buttons, in no time. Our drag-and-drop editor ensures efficiency and precision.
Don't wait—start for free and begin designing stunning UIs immediately. Join the community of professionals who trust Subframe for their design needs.
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>E-commerce Product Share Buttons</title> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background-color: #f8f9fa; color: #212529; display: flex; justify-content: center; align-items: center; min-height: 700px; padding: 20px; } .product-container { max-width: 650px; width: 100%; background-color: #ffffff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); overflow: hidden; transition: transform 0.3s ease; } .product-container:hover { transform: translateY(-5px); } .product-image { width: 100%; height: 300px; overflow: hidden; position: relative; } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .product-image:hover img { transform: scale(1.03); } .product-badge { position: absolute; top: 15px; left: 15px; background-color: #3498db; color: white; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; letter-spacing: 0.5px; opacity: 0.9; } .product-info { padding: 25px; } .product-title { font-size: 24px; font-weight: 600; margin-bottom: 10px; color: #2c3e50; } .product-price { font-size: 22px; font-weight: 500; color: #3498db; margin-bottom: 15px; display: flex; align-items: center; } .original-price { text-decoration: line-through; color: #95a5a6; font-size: 16px; margin-left: 10px; } .product-description { font-size: 14px; line-height: 1.6; color: #7f8c8d; margin-bottom: 25px; } .social-share-container { margin-top: 20px; border-top: 1px solid #ecf0f1; padding-top: 20px; } .share-text { font-size: 14px; color: #95a5a6; margin-bottom: 15px; display: flex; align-items: center; } .share-text::before { content: ''; display: inline-block; width: 4px; height: 16px; background-color: #3498db; margin-right: 8px; border-radius: 2px; } .social-buttons { display: flex; gap: 10px; flex-wrap: wrap; } .social-button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; background-color: #f8f9fa; color: #7f8c8d; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; border: 1px solid #ecf0f1; } .social-button svg { width: 18px; height: 18px; transition: transform 0.3s ease; } .social-button:hover { color: #ffffff; } .social-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: currentColor; opacity: 0.2; transition: opacity 0.3s ease; } .social-button:hover::before { opacity: 1; } .social-button:hover svg { transform: translateY(-20px); } .share-count { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font-size: 12px; font-weight: 600; color: white; transition: transform 0.3s ease; } .social-button:hover .share-count { transform: translateY(-22px); } .facebook { color: #3b5998; } .twitter { color: #1da1f2; } .pinterest { color: #e60023; } .whatsapp { color: #25d366; } .email { color: #ea4335; } .copy-link { color: #6c5ce7; } .product-actions { margin-top: 20px; display: flex; gap: 10px; } .add-to-cart { flex: 1; padding: 12px 20px; background-color: #3498db; color: white; border: none; border-radius: 8px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 8px; } .add-to-cart:hover { background-color: #2980b9; transform: translateY(-2px); } .add-to-cart svg { width: 18px; height: 18px; } .shared-notification { position: fixed; bottom: -60px; left: 50%; transform: translateX(-50%); background-color: #2ecc71; color: white; padding: 10px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transition: bottom 0.3s ease; z-index: 1000; } .shared-notification.show { bottom: 20px; } @media (max-width: 600px) { .product-image { height: 220px; } .product-info { padding: 20px; } .product-title { font-size: 20px; } .product-actions { flex-direction: column; } .social-buttons { justify-content: center; } } </style> </head> <body> <div class="product-container"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Wireless Headphones"> <div class="product-badge">NEW ARRIVAL</div> </div> <div class="product-info"> <h1 class="product-title">SonicWave Pro Wireless Headphones</h1> <div class="product-price"> $149.99 <span class="original-price">$199.99</span> </div> <p class="product-description">Experience crystal-clear audio with our latest noise-cancelling technology. The SonicWave Pro delivers 40 hours of battery life, premium comfort, and seamless Bluetooth 5.2 connectivity in a sleek, minimalist design.</p> <div class="product-actions"> <button class="add-to-cart"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="9" cy="21" r="1"></circle> <circle cx="20" cy="21" r="1"></circle> <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path> </svg> Add to Cart </button> </div> <div class="social-share-container"> <div class="share-text">Share this product</div> <div class="social-buttons"> <div class="social-button facebook" data-platform="Facebook"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path> </svg> <span class="share-count">2.3K</span> </div> <div class="social-button twitter" data-platform="Twitter"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path> </svg> <span class="share-count">872</span> </div> <div class="social-button pinterest" data-platform="Pinterest"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 0a12 12 0 0 0-4.5 23.15c0-.95.02-2.08.06-3.36.09-1.43.58-6.02 1.15-8.5.3-1.3.25-2.3.25-3.08 0-2.9 1.67-5.06 3.75-5.06 1.77 0 2.63 1.33 2.63 2.93 0 1.78-1.14 4.44-1.72 6.9-.5 2.06 1.03 3.75 3.07 3.75 3.68 0 6.16-4.73 6.16-10.33 0-4.25-2.87-7.43-8.07-7.43-5.88 0-9.53 4.37-9.53 9.26 0 1.68.5 2.87 1.27 3.78.36.43.41.6.28 1.1-.1.36-.31 1.22-.4 1.56-.13.5-.53.67-1 .49-2.77-1.13-4.06-4.17-4.06-7.58 0-5.64 4.76-12.4 14.18-12.4 7.58 0 12.56 5.47 12.56 11.35 0 7.77-4.32 13.57-10.7 13.57-2.14 0-4.15-1.16-4.84-2.48l-1.31 5.21c-.48 1.72-1.77 3.87-2.63 5.19A12 12 0 1 0 12 0z"/> </svg> <span class="share-count">543</span> </div> <div class="social-button whatsapp" data-platform="WhatsApp"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M17.498 14.382c-.301-.15-1.767-.867-2.04-.966-.273-.101-.473-.15-.673.15-.197.295-.771.964-.944 1.162-.175.195-.349.21-.646.075-.3-.15-1.263-.465-2.403-1.485-.888-.795-1.484-1.77-1.66-2.07-.174-.3-.019-.465.13-.615.136-.135.301-.345.451-.523.146-.181.194-.301.297-.496.1-.21.049-.375-.025-.524-.075-.15-.672-1.62-.922-2.206-.24-.584-.487-.51-.672-.51-.172-.015-.371-.015-.571-.015-.2 0-.523.074-.797.359-.273.3-1.045 1.02-1.045 2.475s1.07 2.865 1.219 3.075c.149.195 2.105 3.195 5.1 4.485.714.3 1.27.48 1.704.629.714.227 1.365.195 1.88.121.574-.091 1.767-.721 2.016-1.426.255-.705.255-1.29.18-1.425-.074-.135-.27-.21-.57-.345m-5.446 7.443h-.016c-1.77 0-3.524-.48-5.055-1.38l-.36-.214-3.75.975 1.005-3.645-.239-.375c-.99-1.576-1.516-3.391-1.516-5.26 0-5.445 4.455-9.885 9.942-9.885 2.654 0 5.145 1.035 7.021 2.91 1.875 1.859 2.909 4.35 2.909 6.99-.004 5.444-4.46 9.885-9.935 9.885M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.334.101 11.893c0 2.096.549 4.14 1.595 5.945L0 24l6.335-1.652c1.746.943 3.71 1.444 5.71 1.447h.006c6.585 0 11.946-5.336 11.949-11.896 0-3.176-1.24-6.165-3.495-8.411"/> </svg> <span class="share-count">196</span> </div> <div class="social-button email" data-platform="Email"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path> <polyline points="22,6 12,13 2,6"></polyline> </svg> <span class="share-count">42</span> </div> <div class="social-button copy-link" data-platform="Copy Link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path> <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> </svg> <span class="share-count">85</span> </div> </div> </div> </div> </div> <div class="shared-notification" id="sharedNotification"> Shared successfully! </div> <script> document.addEventListener('DOMContentLoaded', function() { const socialButtons = document.querySelectorAll('.social-button'); const sharedNotification = document.getElementById('sharedNotification'); socialButtons.forEach(button => { button.addEventListener('click', function() { const platform = this.getAttribute('data-platform'); // Simulate share animation const count = this.querySelector('.share-count'); const currentCount = parseInt(count.textContent.replace(/[^\d]/g, ''), 10); count.textContent = (currentCount + 1).toString(); // Show notification sharedNotification.textContent = `Shared to ${platform} successfully!`; sharedNotification.classList.add('show'); // Hide notification after 2 seconds setTimeout(() => { sharedNotification.classList.remove('show'); }, 2000); // Simulate ripple effect const ripple = document.createElement('span'); ripple.style.position = 'absolute'; ripple.style.borderRadius = '50%'; ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.4)'; ripple.style.width = '100%'; ripple.style.height = '100%'; ripple.style.transform = 'scale(0)'; ripple.style.opacity = '1'; ripple.style.animation = 'ripple 0.6s linear'; ripple.style.pointerEvents = 'none'; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); }); // Add to cart animation const addToCartBtn = document.querySelector('.add-to-cart'); addToCartBtn.addEventListener('click', function() { this.innerHTML = ` <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="20 6 9 17 4 12"></polyline> </svg> Added to Cart `; this.style.backgroundColor = '#2ecc71'; setTimeout(() => { this.innerHTML = ` <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="9" cy="21" r="1"></circle> <circle cx="20" cy="21" r="1"></circle> <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path> </svg> Add to Cart `; this.style.backgroundColor = '#3498db'; }, 2000); }); }); // Add keyframe animation for ripple effect const style = document.createElement('style'); style.textContent = ` @keyframes ripple { to { transform: scale(3); opacity: 0; } } `; 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>News Share Buttons</title> <style> :root { --blue: #3b5998; --red: #e4405f; --cyan: #1da1f2; --green: #25D366; --orange: #ff4500; --purple: #8a3ab9; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } body { background-color: #f5f5f5; color: #333; line-height: 1.6; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .container { max-width: 650px; width: 100%; background-color: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); overflow: hidden; position: relative; } .article-header { padding: 20px 20px 0; } .category { display: inline-block; background-color: #ff6b6b; color: white; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 15px; } .article-title { font-size: 28px; font-weight: 800; margin-bottom: 15px; line-height: 1.3; color: #222; } .article-meta { display: flex; align-items: center; margin-bottom: 20px; font-size: 14px; color: #777; } .article-author { font-weight: 600; color: #444; margin-right: 10px; } .article-date { margin-left: 10px; } .article-image { width: 100%; height: 220px; object-fit: cover; } .article-excerpt { padding: 20px; font-size: 16px; line-height: 1.8; color: #444; border-bottom: 1px solid #eee; } .share-container { padding: 20px; display: flex; flex-direction: column; align-items: center; } .share-text { font-size: 18px; font-weight: 700; margin-bottom: 15px; color: #222; position: relative; padding-bottom: 5px; letter-spacing: 0.5px; } .share-text::after { content: ''; position: absolute; bottom: 0; left: 25%; width: 50%; height: 3px; background-color: #ff6b6b; border-radius: 10px; } .share-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; } .share-button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 90px; padding: 12px 4px; border-radius: 8px; font-weight: 700; color: white; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; overflow: hidden; border: none; outline: none; text-align: center; } .share-button:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } .share-button::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%); opacity: 0; transition: opacity 0.5s ease; } .share-button:hover::after { opacity: 1; animation: pulse 1.5s infinite; } @keyframes pulse { 0% { transform: scale(0.8); opacity: 0; } 50% { opacity: 0.4; } 100% { transform: scale(1.8); opacity: 0; } } .share-icon { font-size: 22px; margin-bottom: 5px; } .share-name { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .share-count { background-color: rgba(255, 255, 255, 0.3); border-radius: 20px; padding: 2px 8px; font-size: 11px; margin-top: 2px; transition: background-color 0.3s ease; } .share-button:hover .share-count { background-color: rgba(255, 255, 255, 0.5); } .facebook { background-color: var(--blue); } .twitter { background-color: var(--cyan); } .instagram { background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); } .whatsapp { background-color: var(--green); } .reddit { background-color: var(--orange); } .pinterest { background-color: #E60023; } .popup-notification { position: fixed; bottom: 20px; right: 20px; background-color: #333; color: white; padding: 15px 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transform: translateY(100px); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; z-index: 1000; display: flex; align-items: center; font-weight: 500; } .popup-notification.show { transform: translateY(0); opacity: 1; } .popup-notification i { margin-right: 10px; color: #4caf50; } .share-button.clicked { animation: clickEffect 0.5s ease forwards; } @keyframes clickEffect { 0% { transform: scale(1); } 50% { transform: scale(0.95); } 100% { transform: scale(1); } } .total-shares { margin-top: 20px; font-size: 16px; color: #555; background-color: #f0f0f0; padding: 8px 15px; border-radius: 20px; display: inline-flex; align-items: center; font-weight: 600; } .total-shares-count { margin-left: 5px; font-weight: 700; color: #ff6b6b; } @media (max-width: 600px) { .article-title { font-size: 24px; } .share-buttons { gap: 8px; } .share-button { width: 80px; padding: 10px 2px; } .share-icon { font-size: 18px; } } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> </head> <body> <div class="container"> <div class="article-header"> <div class="category">Climate Crisis</div> <h1 class="article-title">Global Leaders Commit to Aggressive Climate Action at Paris Summit</h1> <div class="article-meta"> <span class="article-author">By Emma Rodriguez</span> | <span class="article-date">May 17, 2023</span> </div> </div> <img src="https://source.unsplash.com/random/1200x600/?climate,conference" alt="Climate Summit" class="article-image"> <div class="article-excerpt"> <p>In a historic move that could reshape global climate policy, 197 nations have agreed to substantially increase their emission reduction targets by 2030. The breakthrough came after five days of intense negotiations, with wealthy nations also pledging $100 billion annually to help developing countries transition to renewable energy infrastructure.</p> </div> <div class="share-container"> <h3 class="share-text">Spread The Word</h3> <div class="share-buttons"> <button class="share-button facebook" data-platform="Facebook"> <i class="fab fa-facebook-f share-icon"></i> <span class="share-name">Facebook</span> <span class="share-count">2.4K</span> </button> <button class="share-button twitter" data-platform="Twitter"> <i class="fab fa-twitter share-icon"></i> <span class="share-name">Twitter</span> <span class="share-count">1.8K</span> </button> <button class="share-button whatsapp" data-platform="WhatsApp"> <i class="fab fa-whatsapp share-icon"></i> <span class="share-name">WhatsApp</span> <span class="share-count">953</span> </button> <button class="share-button reddit" data-platform="Reddit"> <i class="fab fa-reddit-alien share-icon"></i> <span class="share-name">Reddit</span> <span class="share-count">421</span> </button> <button class="share-button pinterest" data-platform="Pinterest"> <i class="fab fa-pinterest-p share-icon"></i> <span class="share-name">Pinterest</span> <span class="share-count">317</span> </button> </div> <div class="total-shares"> Total Shares: <span class="total-shares-count">5,891</span> </div> </div> </div> <div class="popup-notification"> <i class="fas fa-check-circle"></i> <span class="notification-text">Shared successfully!</span> </div> <script> document.addEventListener('DOMContentLoaded', function() { const shareButtons = document.querySelectorAll('.share-button'); const popup = document.querySelector('.popup-notification'); const notificationText = document.querySelector('.notification-text'); const totalSharesCount = document.querySelector('.total-shares-count'); let totalShares = 5891; // Initial count from the HTML shareButtons.forEach(button => { button.addEventListener('click', function() { const platform = this.getAttribute('data-platform'); const countElement = this.querySelector('.share-count'); let count = parseFloat(countElement.textContent.replace(/[^\d.]/g, '')) * 1000; if (countElement.textContent.includes('K')) { count = count / 1000; } // Increment count count += Math.floor(Math.random() * 5) + 1; totalShares += 1; // Format and update the count if (count >= 1000) { countElement.textContent = (count / 1000).toFixed(1) + 'K'; } else { countElement.textContent = count; } // Update total shares totalSharesCount.textContent = totalShares.toLocaleString(); // Show notification notificationText.textContent = `Shared on ${platform} successfully!`; popup.classList.add('show'); // Add click animation this.classList.add('clicked'); // Hide notification after 3 seconds setTimeout(() => { popup.classList.remove('show'); }, 3000); // Remove click animation setTimeout(() => { this.classList.remove('clicked'); }, 500); }); // Add hover effect to make the count pulse button.addEventListener('mouseenter', function() { const countElement = this.querySelector('.share-count'); countElement.style.transform = 'scale(1.1)'; countElement.style.transition = 'transform 0.3s ease'; }); button.addEventListener('mouseleave', function() { const countElement = this.querySelector('.share-count'); countElement.style.transform = 'scale(1)'; }); }); // Function to simulate random sharing activity function simulateRandomSharing() { const randomInterval = Math.floor(Math.random() * 8000) + 5000; // Between 5-13 seconds setTimeout(() => { const randomButtonIndex = Math.floor(Math.random() * shareButtons.length); const randomButton = shareButtons[randomButtonIndex]; // Animate the button subtly randomButton.style.transform = 'scale(1.05)'; setTimeout(() => { randomButton.style.transform = ''; }, 300); // Update the share count const countElement = randomButton.querySelector('.share-count'); let count = parseFloat(countElement.textContent.replace(/[^\d.]/g, '')); if (countElement.textContent.includes('K')) { count = count * 1000; } count += 1; totalShares += 1; // Format and update if (count >= 1000) { countElement.textContent = (count / 1000).toFixed(1) + 'K'; } else { countElement.textContent = count; } // Update total totalSharesCount.textContent = totalShares.toLocaleString(); // Call the function again for continuous simulation simulateRandomSharing(); }, randomInterval); } // Start the simulation after a delay setTimeout(simulateRandomSharing, 3000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Elegant Social Share Buttons</title> <style> :root { --primary-color: #374151; --accent-color-twitter: #1DA1F2; --accent-color-facebook: #4267B2; --accent-color-linkedin: #0077b5; --accent-color-pinterest: #E60023; --accent-color-email: #6b7280; --accent-color-bookmark: #EAB308; --bg-color: #f9fafb; --text-color: #1f2937; --light-gray: #e5e7eb; --white: #ffffff; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color: var(--bg-color); color: var(--text-color); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; line-height: 1.6; } .blog-post { max-width: 650px; background: var(--white); border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); overflow: hidden; position: relative; transition: var(--transition); } .post-image { width: 100%; height: 240px; object-fit: cover; } .post-content { padding: 30px; } .post-title { font-size: 24px; margin-bottom: 16px; color: var(--primary-color); font-weight: 700; } .post-meta { display: flex; align-items: center; margin-bottom: 18px; font-size: 14px; color: #6b7280; } .post-author { display: flex; align-items: center; } .author-avatar { width: 32px; height: 32px; border-radius: 50%; margin-right: 10px; object-fit: cover; } .post-date { margin-left: auto; } .post-excerpt { margin-bottom: 24px; color: #4b5563; } /* Social Share Container */ .share-container { border-top: 1px solid var(--light-gray); padding-top: 20px; position: relative; } .share-label { font-size: 14px; font-weight: 600; color: var(--primary-color); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .share-label svg { width: 16px; height: 16px; } .social-share { display: flex; flex-wrap: wrap; gap: 14px; } .share-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: transparent; border: 1px solid var(--light-gray); cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; } .share-button:focus { outline: none; } .share-button svg { width: 18px; height: 18px; fill: none; stroke: var(--primary-color); stroke-width: 1.5; transition: var(--transition); } .share-button:hover { transform: translateY(-3px) scale(1.1); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); } .share-button:active { transform: translateY(0) scale(1); } /* Button specific hover colors */ .twitter:hover { border-color: var(--accent-color-twitter); } .twitter:hover svg { stroke: var(--accent-color-twitter); } .facebook:hover { border-color: var(--accent-color-facebook); } .facebook:hover svg { stroke: var(--accent-color-facebook); } .linkedin:hover { border-color: var(--accent-color-linkedin); } .linkedin:hover svg { stroke: var(--accent-color-linkedin); } .pinterest:hover { border-color: var(--accent-color-pinterest); } .pinterest:hover svg { stroke: var(--accent-color-pinterest); } .email:hover { border-color: var(--accent-color-email); } .email:hover svg { stroke: var(--accent-color-email); } .bookmark:hover { border-color: var(--accent-color-bookmark); } .bookmark:hover svg { stroke: var(--accent-color-bookmark); } /* Tooltip */ .tooltip { position: absolute; bottom: -32px; left: 50%; transform: translateX(-50%) scale(0.7); background-color: var(--primary-color); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; opacity: 0; white-space: nowrap; transition: var(--transition); pointer-events: none; z-index: 10; } .tooltip::before { content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; background-color: var(--primary-color); } .share-button:hover .tooltip { opacity: 1; transform: translateX(-50%) scale(1); bottom: -42px; } /* Success message */ .success-message { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px); background-color: #10B981; color: white; padding: 12px 24px; border-radius: 30px; font-size: 14px; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); opacity: 0; transition: var(--transition); z-index: 1000; display: flex; align-items: center; gap: 8px; } .success-message.show { transform: translateX(-50%) translateY(0); opacity: 1; } .success-message svg { width: 16px; height: 16px; } /* Ripple effect */ .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.6); transform: scale(0); animation: ripple 0.6s linear; } @keyframes ripple { to { transform: scale(3); opacity: 0; } } /* Copy link button */ .copy-link { display: flex; align-items: center; margin-top: 16px; width: 100%; padding: 10px 14px; background-color: var(--bg-color); border-radius: 30px; border: 1px solid var(--light-gray); font-size: 14px; color: var(--primary-color); overflow: hidden; transition: var(--transition); } .copy-link:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .link-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; } .copy-button { display: flex; align-items: center; gap: 6px; background-color: var(--primary-color); color: white; border: none; padding: 6px 12px; border-radius: 20px; cursor: pointer; font-weight: 500; font-size: 12px; transition: var(--transition); } .copy-button svg { width: 14px; height: 14px; } .copy-button:hover { background-color: #2d3748; } @media (max-width: 480px) { .post-content { padding: 20px; } .post-title { font-size: 20px; } .social-share { gap: 10px; } .share-button { width: 36px; height: 36px; } .share-button svg { width: 16px; height: 16px; } } </style> </head> <body> <div class="blog-post"> <img src="https://source.unsplash.com/bDfvK3xDH78/1600x900" alt="Minimal workspace setup" class="post-image"> <div class="post-content"> <div class="post-meta"> <div class="post-author"> <img src="https://source.unsplash.com/rDEOVtE7vOs/100x100" alt="Author" class="author-avatar"> <span>By Alex Morgan</span> </div> <div class="post-date">April 2, 2023</div> </div> <h1 class="post-title">The Art of Minimal Design: Less is More</h1> <p class="post-excerpt">Minimalism isn't just about decluttering physical spaces—it's a design philosophy that can transform digital experiences. In our increasingly noisy digital world, a clean, understated approach can make your content truly stand out. This article explores how subtle design choices can create powerful impressions.</p> <div class="share-container"> <div class="share-label"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="18" cy="5" r="3"></circle> <circle cx="6" cy="12" r="3"></circle> <circle cx="18" cy="19" r="3"></circle> <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line> <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line> </svg> Share this article </div> <div class="social-share"> <button class="share-button twitter" data-platform="Twitter"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path> </svg> <span class="tooltip">Share on Twitter</span> </button> <button class="share-button facebook" data-platform="Facebook"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path> </svg> <span class="tooltip">Share on Facebook</span> </button> <button class="share-button linkedin" data-platform="LinkedIn"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path> <rect x="2" y="9" width="4" height="12"></rect> <circle cx="4" cy="4" r="2"></circle> </svg> <span class="tooltip">Share on LinkedIn</span> </button> <button class="share-button pinterest" data-platform="Pinterest"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M8 12h8"></path> <path d="M12 8v8"></path> <circle cx="12" cy="12" r="10"></circle> </svg> <span class="tooltip">Pin this article</span> </button> <button class="share-button email" data-platform="Email"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path> <polyline points="22,6 12,13 2,6"></polyline> </svg> <span class="tooltip">Email this article</span> </button> <button class="share-button bookmark" data-platform="Bookmark"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path> </svg> <span class="tooltip">Save for later</span> </button> </div> <div class="copy-link"> <div class="link-text">https://minimaldesignblog.com/the-art-of-minimal-design-less-is-more</div> <button class="copy-button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> </svg> Copy link </button> </div> </div> </div> </div> <div class="success-message"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="20 6 9 17 4 12"></polyline> </svg> <span id="success-text">Link copied to clipboard!</span> </div> <script> document.addEventListener('DOMContentLoaded', () => { const shareButtons = document.querySelectorAll('.share-button'); const copyButton = document.querySelector('.copy-button'); const successMessage = document.querySelector('.success-message'); const successText = document.getElementById('success-text'); // Add ripple effect to buttons function createRipple(e) { const button = e.currentTarget; const rect = button.getBoundingClientRect(); const circle = document.createElement('span'); const diameter = Math.max(rect.width, rect.height); circle.style.width = circle.style.height = `${diameter}px`; circle.style.left = `${e.clientX - rect.left - diameter / 2}px`; circle.style.top = `${e.clientY - rect.top - diameter / 2}px`; circle.classList.add('ripple'); const ripple = button.querySelector('.ripple'); if (ripple) { ripple.remove(); } button.appendChild(circle); } // Share functionality shareButtons.forEach(button => { button.addEventListener('click', (e) => { createRipple(e); const platform = button.getAttribute('data-platform'); const postTitle = "The Art of Minimal Design: Less is More"; const postUrl = "https://minimaldesignblog.com/the-art-of-minimal-design-less-is-more"; // Simulate sharing (in a real app, these would open the respective sharing dialogs) showSuccessMessage(`Shared on ${platform}!`); }); }); // Copy link functionality copyButton.addEventListener('click', (e) => { const linkText = document.querySelector('.link-text').textContent; navigator.clipboard.writeText(linkText) .then(() => { showSuccessMessage('Link copied to clipboard!'); }) .catch(err => { console.error('Could not copy text: ', err); showSuccessMessage('Failed to copy link', true); }); }); // Show success message function showSuccessMessage(message, isError = false) { successText.textContent = message; successMessage.style.backgroundColor = isError ? '#EF4444' : '#10B981'; successMessage.classList.add('show'); setTimeout(() => { successMessage.classList.remove('show'); }, 2000); } // Social share buttons hover interaction shareButtons.forEach(button => { button.addEventListener('mouseenter', () => { button.style.transform = 'translateY(-3px) scale(1.1)'; }); button.addEventListener('mouseleave', () => { button.style.transform = ''; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Portfolio Social Share Overlay</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background-color: #f8f8f8; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; } .portfolio-container { position: relative; width: 100%; max-width: 700px; height: 700px; overflow: hidden; } .portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); width: 100%; height: 100%; gap: 10px; } .portfolio-item { position: relative; overflow: hidden; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .portfolio-item:hover { transform: scale(1.02); } .portfolio-item img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.4s ease; } .portfolio-item:hover img { filter: brightness(0.85); } .item-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); opacity: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; transition: opacity 0.4s ease; color: white; } .portfolio-item:hover .item-overlay { opacity: 1; } .item-title { font-weight: 600; font-size: 18px; margin-bottom: 5px; transform: translateY(-10px); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; transition-delay: 0.1s; } .item-category { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; transform: translateY(-10px); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; transition-delay: 0.2s; } .portfolio-item:hover .item-title, .portfolio-item:hover .item-category { transform: translateY(0); opacity: 1; } .share-buttons { position: absolute; bottom: 20px; right: 20px; display: flex; align-items: center; gap: 12px; transition: all 0.3s ease; transform: translateY(10px); opacity: 0; } .portfolio-item:hover .share-buttons { transform: translateY(0); opacity: 1; transition-delay: 0.2s; } .share-button { width: 36px; height: 36px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.12); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); transform: scale(0.95); color: white; } .share-button:hover { background-color: rgba(255, 255, 255, 0.25); transform: scale(1.05); } .share-button svg { width: 16px; height: 16px; fill: currentColor; transition: all 0.3s ease; } .share-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); display: flex; justify-content: center; align-items: center; z-index: 100; opacity: 0; visibility: hidden; transition: all 0.4s ease; backdrop-filter: blur(5px); } .share-modal.active { opacity: 1; visibility: visible; } .modal-content { background-color: white; border-radius: 12px; width: 90%; max-width: 400px; padding: 30px; transform: translateY(20px); transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); } .share-modal.active .modal-content { transform: translateY(0); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .modal-title { font-weight: 600; font-size: 18px; color: #333; } .close-button { background: none; border: none; cursor: pointer; font-size: 24px; color: #999; transition: color 0.3s ease; } .close-button:hover { color: #333; } .modal-share-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 25px; } .modal-share-button { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: transform 0.3s ease; } .modal-share-button:hover { transform: translateY(-3px); } .modal-share-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .modal-share-icon svg { width: 24px; height: 24px; fill: white; } .modal-share-name { font-size: 12px; color: #666; } .link-section { background-color: #f7f7f7; border-radius: 8px; padding: 15px; margin-bottom: 20px; } .link-field { display: flex; width: 100%; } .link-input { flex: 1; padding: 10px 15px; border: 1px solid #e0e0e0; border-right: none; border-top-left-radius: 6px; border-bottom-left-radius: 6px; font-size: 14px; color: #333; background-color: white; } .copy-button { padding: 10px 15px; background-color: #4b4b4b; color: white; border: none; border-top-right-radius: 6px; border-bottom-right-radius: 6px; cursor: pointer; transition: background-color 0.3s ease; font-weight: 500; font-size: 14px; } .copy-button:hover { background-color: #2a2a2a; } .copy-button.copied { background-color: #28a745; } .notification { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px); background-color: #333; color: white; padding: 12px 24px; border-radius: 50px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); font-size: 14px; font-weight: 500; opacity: 0; transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); z-index: 1000; } .notification.show { opacity: 1; transform: translateX(-50%) translateY(0); } .twitter { background-color: #1DA1F2; } .facebook { background-color: #4267B2; } .linkedin { background-color: #0077B5; } .pinterest { background-color: #E60023; } .whatsapp { background-color: #25D366; } .reddit { background-color: #FF4500; } .telegram { background-color: #0088cc; } .email { background-color: #ea4335; } @media (max-width: 500px) { .portfolio-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); } .modal-share-buttons { grid-template-columns: repeat(3, 1fr); } .item-title { font-size: 16px; } .item-category { font-size: 11px; } } /* Focus states for accessibility */ .share-button:focus, .modal-share-button:focus, .close-button:focus, .copy-button:focus { outline: 2px solid #4a90e2; outline-offset: 2px; } /* Mouse interaction indicator */ .cursor-dot { width: 8px; height: 8px; background-color: #fff; border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: transform 0.1s ease, opacity 0.2s ease; mix-blend-mode: difference; opacity: 0; } .cursor-circle { width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; position: fixed; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s, border 0.3s, opacity 0.2s ease; mix-blend-mode: difference; opacity: 0; } .cursor-active .cursor-dot { transform: translate(-50%, -50%) scale(1.5); } .cursor-active .cursor-circle { width: 30px; height: 30px; border-color: rgba(255, 255, 255, 0.8); } </style> </head> <body> <div class="cursor-dot"></div> <div class="cursor-circle"></div> <div class="portfolio-container"> <div class="portfolio-grid"> <div class="portfolio-item" data-title="Minimalist Brand Identity" data-category="Branding" data-link="https://myportfolio.com/minimalist-brand-identity"> <img src="https://images.unsplash.com/photo-1583213933251-acea45ee0de1?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Minimalist Brand Identity"> <div class="item-overlay"> <div> <h3 class="item-title">Minimalist Brand Identity</h3> <p class="item-category">Branding</p> </div> <div class="share-buttons"> <div class="share-button" aria-label="Share" tabindex="0"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 5.12548 15.0077 5.24917 15.0227 5.37061L8.08261 9.26966C7.54305 8.48374 6.6582 8 5.66667 8C4.19391 8 3 9.19391 3 10.6667C3 12.1394 4.19391 13.3333 5.66667 13.3333C6.6582 13.3333 7.54305 12.8496 8.08261 12.0637L15.0227 15.9627C15.0077 16.0842 15 16.2079 15 16.3333C15 17.8061 16.1939 19 17.6667 19C19.1394 19 20.3333 17.8061 20.3333 16.3333C20.3333 14.8606 19.1394 13.6667 17.6667 13.6667C16.6751 13.6667 15.7903 14.1504 15.2507 14.9363L8.31061 11.0373C8.32561 10.9158 8.33333 10.7921 8.33333 10.6667C8.33333 10.5413 8.32561 10.4175 8.31061 10.296L15.2507 6.39699C15.7903 7.18292 16.6751 7.66667 17.6667 7.66667" fill="currentColor"/> </svg> </div> </div> </div> </div> <div class="portfolio-item" data-title="UI/UX Case Study" data-category="Interface Design" data-link="https://myportfolio.com/ui-ux-case-study"> <img src="https://images.unsplash.com/photo-1558655146-d09347e92766?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="UI/UX Case Study"> <div class="item-overlay"> <div> <h3 class="item-title">UI/UX Case Study</h3> <p class="item-category">Interface Design</p> </div> <div class="share-buttons"> <div class="share-button" aria-label="Share" tabindex="0"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 5.12548 15.0077 5.24917 15.0227 5.37061L8.08261 9.26966C7.54305 8.48374 6.6582 8 5.66667 8C4.19391 8 3 9.19391 3 10.6667C3 12.1394 4.19391 13.3333 5.66667 13.3333C6.6582 13.3333 7.54305 12.8496 8.08261 12.0637L15.0227 15.9627C15.0077 16.0842 15 16.2079 15 16.3333C15 17.8061 16.1939 19 17.6667 19C19.1394 19 20.3333 17.8061 20.3333 16.3333C20.3333 14.8606 19.1394 13.6667 17.6667 13.6667C16.6751 13.6667 15.7903 14.1504 15.2507 14.9363L8.31061 11.0373C8.32561 10.9158 8.33333 10.7921 8.33333 10.6667C8.33333 10.5413 8.32561 10.4175 8.31061 10.296L15.2507 6.39699C15.7903 7.18292 16.6751 7.66667 17.6667 7.66667" fill="currentColor"/> </svg> </div> </div> </div> </div> <div class="portfolio-item" data-title="Typographic Exploration" data-category="Typography" data-link="https://myportfolio.com/typographic-exploration"> <img src="https://images.unsplash.com/photo-1561070791-2526d30994b5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Typographic Exploration"> <div class="item-overlay"> <div> <h3 class="item-title">Typographic Exploration</h3> <p class="item-category">Typography</p> </div> <div class="share-buttons"> <div class="share-button" aria-label="Share" tabindex="0"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 5.12548 15.0077 5.24917 15.0227 5.37061L8.08261 9.26966C7.54305 8.48374 6.6582 8 5.66667 8C4.19391 8 3 9.19391 3 10.6667C3 12.1394 4.19391 13.3333 5.66667 13.3333C6.6582 13.3333 7.54305 12.8496 8.08261 12.0637L15.0227 15.9627C15.0077 16.0842 15 16.2079 15 16.3333C15 17.8061 16.1939 19 17.6667 19C19.1394 19 20.3333 17.8061 20.3333 16.3333C20.3333 14.8606 19.1394 13.6667 17.6667 13.6667C16.6751 13.6667 15.7903 14.1504 15.2507 14.9363L8.31061 11.0373C8.32561 10.9158 8.33333 10.7921 8.33333 10.6667C8.33333 10.5413 8.32561 10.4175 8.31061 10.296L15.2507 6.39699C15.7903 7.18292 16.6751 7.66667 17.6667 7.66667" fill="currentColor"/> </svg> </div> </div> </div> </div> <div class="portfolio-item" data-title="Motion Design Reel" data-category="Animation" data-link="https://myportfolio.com/motion-design-reel"> <img src="https://images.unsplash.com/photo-1598550896190-d3c241802802?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Motion Design Reel"> <div class="item-overlay"> <div> <h3 class="item-title">Motion Design Reel</h3> <p class="item-category">Animation</p> </div> <div class="share-buttons"> <div class="share-button" aria-label="Share" tabindex="0"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 5.12548 15.0077 5.24917 15.0227 5.37061L8.08261 9.26966C7.54305 8.48374 6.6582 8 5.66667 8C4.19391 8 3 9.19391 3 10.6667C3 12.1394 4.19391 13.3333 5.66667 13.3333C6.6582 13.3333 7.54305 12.8496 8.08261 12.0637L15.0227 15.9627C15.0077 16.0842 15 16.2079 15 16.3333C15 17.8061 16.1939 19 17.6667 19C19.1394 19 20.3333 17.8061 20.3333 16.3333C20.3333 14.8606 19.1394 13.6667 17.6667 13.6667C16.6751 13.6667 15.7903 14.1504 15.2507 14.9363L8.31061 11.0373C8.32561 10.9158 8.33333 10.7921 8.33333 10.6667C8.33333 10.5413 8.32561 10.4175 8.31061 10.296L15.2507 6.39699C15.7903 7.18292 16.6751 7.66667 17.6667 7.66667" fill="currentColor"/> </svg> </div> </div> </div> </div> </div> </div> <div class="share-modal"> <div class="modal-content"> <div class="modal-header"> <h2 class="modal-title">Share this work</h2> <button class="close-button" aria-label="Close">×</button> </div> <div class="modal-share-buttons"> <div class="modal-share-button" data-platform="twitter"> <div class="modal-share-icon twitter"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/> </svg> </div> <span class="modal-share-name">Twitter</span> </div> <div class="modal-share-button" data-platform="facebook"> <div class="modal-share-icon facebook"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/> </svg> </div> <span class="modal-share-name">Facebook</span> </div> <div class="modal-share-button" data-platform="linkedin"> <div class="modal-share-icon linkedin"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/> </svg> </div> <span class="modal-share-name">LinkedIn</span> </div> <div class="modal-share-button" data-platform="pinterest"> <div class="modal-share-icon pinterest"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 4.74 2.754 8.843 6.75 10.765-.09-.779-.166-1.978.034-2.828.182-.784 1.172-4.97 1.172-4.97s-.299-.6-.299-1.485c0-1.39.806-2.428 1.81-2.428.853 0 1.264.64 1.264 1.408 0 .858-.546 2.14-.828 3.33-.236.995.5 1.807 1.48 1.807 1.778 0 3.144-1.874 3.144-4.58 0-2.393-1.72-4.068-4.177-4.068-2.845 0-4.515 2.135-4.515 4.34 0 .859.331 1.781.744 2.281a.3.3 0 01.069.288l-.278 1.133c-.044.183-.145.223-.335.134-1.249-.581-2.03-2.407-2.03-3.874 0-3.154 2.292-6.052 6.608-6.052 3.469 0 6.165 2.473 6.165 5.776 0 3.447-2.173 6.22-5.19 6.22-1.013 0-1.965-.525-2.291-1.148l-.623 2.378c-.226.869-.835 1.958-1.244 2.621.937.29 1.931.446 2.962.446 5.522 0 10.016-4.48 10.016-10s-4.494-10-10.016-10z"/> </svg> </div> <span class="modal-share-name">Pinterest</span> </div> <div class="modal-share-button" data-platform="whatsapp"> <div class="modal-share-icon whatsapp"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.174.198-.298.297-.497.1-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/> </svg> </div> <span class="modal-share-name">WhatsApp</span> </div> <div class="modal-share-button" data-platform="reddit"> <div class="modal-share-icon reddit"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/> </svg> </div> <span class="modal-share-name">Reddit</span> </div> <div class="modal-share-button" data-platform="telegram"> <div class="modal-share-icon telegram"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.064-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>StreamVibe Social Share Buttons</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; } :root { --primary-bg: #0f0f13; --secondary-bg: #181820; --neon-pink: #ff2d71; --neon-blue: #00b8ff; --neon-purple: #9d4edd; --neon-green: #39ff14; --text-color: #ffffff; } body { background-color: var(--primary-bg); height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow-x: hidden; color: var(--text-color); } .container { max-width: 700px; width: 100%; padding: 20px; position: relative; } .content-preview { background-color: var(--secondary-bg); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); margin-bottom: 40px; position: relative; } .video-thumbnail { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; /* 16:9 aspect ratio */ overflow: hidden; } .video-thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .video-play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; background-color: rgba(0, 0, 0, 0.6); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; border: 2px solid var(--neon-blue); box-shadow: 0 0 15px var(--neon-blue); transition: all 0.3s ease; } .video-play-button:hover { background-color: rgba(0, 0, 0, 0.8); transform: translate(-50%, -50%) scale(1.1); } .video-play-button i { color: var(--neon-blue); font-size: 28px; margin-left: 5px; } .content-details { padding: 20px; } .content-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; } .content-metadata { display: flex; align-items: center; margin-bottom: 16px; font-size: 14px; color: rgba(255, 255, 255, 0.7); } .content-metadata span { margin-right: 15px; display: flex; align-items: center; } .content-metadata i { margin-right: 5px; } .share-container { text-align: center; position: relative; margin-top: 20px; } .share-text { font-size: 18px; margin-bottom: 25px; letter-spacing: 0.5px; position: relative; display: inline-block; } .share-text::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink)); transform: scaleX(0); transform-origin: right; transition: transform 0.5s ease; } .share-text:hover::after { transform: scaleX(1); transform-origin: left; } .social-share { display: flex; justify-content: center; gap: 25px; flex-wrap: wrap; } .social-button { position: relative; width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; background-color: var(--secondary-bg); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .social-button::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; border: 2px solid transparent; background: linear-gradient(var(--secondary-bg), var(--secondary-bg)) padding-box, linear-gradient(45deg, var(--neon-color), rgba(255, 255, 255, 0.3)) border-box; z-index: 0; } .social-button i { font-size: 24px; color: var(--neon-color); position: relative; z-index: 1; transition: color 0.3s ease, transform 0.3s ease; } .ripple { position: absolute; border-radius: 50%; background-color: var(--neon-color); opacity: 0; transform: scale(0); animation: ripple-animation 0.8s ease-out; } @keyframes ripple-animation { 0% { transform: scale(0); opacity: 0.5; } 100% { transform: scale(2.5); opacity: 0; } } .social-button:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 15px var(--neon-color); } .social-button:hover i { transform: scale(1.2); } /* Specific colors for each social media */ .facebook { --neon-color: #1877f2; } .twitter { --neon-color: var(--neon-blue); } .instagram { --neon-color: var(--neon-pink); } .tiktok { --neon-color: var(--neon-purple); } .whatsapp { --neon-color: var(--neon-green); } /* Tooltip */ .social-button-wrapper { position: relative; } .tooltip { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%) scale(0.8); background-color: rgba(0, 0, 0, 0.8); color: white; font-size: 12px; padding: 5px 10px; border-radius: 5px; opacity: 0; pointer-events: none; transition: all 0.3s ease; white-space: nowrap; } .tooltip::before { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); border-width: 0 5px 5px 5px; border-style: solid; border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent; } .social-button-wrapper:hover .tooltip { opacity: 1; transform: translateX(-50%) scale(1); bottom: -35px; } .copy-button { margin-top: 30px; background-color: var(--secondary-bg); color: white; border: none; padding: 12px 24px; border-radius: 30px; cursor: pointer; font-size: 16px; position: relative; overflow: hidden; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .copy-button i { margin-right: 8px; } .copy-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink)); opacity: 0.2; transition: opacity 0.3s ease; } .copy-button:hover::before { opacity: 0.4; } .copy-button:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .success-message { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 10px 20px; border-radius: 5px; transition: transform 0.3s ease; z-index: 100; } .success-message.show { transform: translateX(-50%) translateY(0); } /* Responsive styles */ @media (max-width: 600px) { .social-share { gap: 15px; } .social-button { width: 50px; height: 50px; } .social-button i { font-size: 20px; } .content-title { font-size: 18px; } .video-play-button { width: 60px; height: 60px; } .video-play-button i { font-size: 24px; } } /* Floating particles background */ .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; } .particle { position: absolute; border-radius: 50%; opacity: 0.5; pointer-events: none; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"> </head> <body> <div class="particles" id="particles"></div> <div class="container"> <div class="content-preview"> <div class="video-thumbnail"> <img src="https://images.unsplash.com/photo-1567593810070-7a3d471af022?q=80&w=1171&auto=format&fit=crop" alt="Video Thumbnail"> <div class="video-play-button"> <i class="fas fa-play"></i> </div> </div> <div class="content-details"> <h2 class="content-title">Behind the Streams: The Art of Live Music Production</h2> <div class="content-metadata"> <span><i class="fas fa-eye"></i> 1.4M views</span> <span><i class="fas fa-clock"></i> 28:45</span> <span><i class="fas fa-heart"></i> 87K</span> </div> </div> </div> <div class="share-container"> <div class="share-text">Share this masterpiece with your network</div> <div class="social-share"> <div class="social-button-wrapper"> <div class="social-button facebook" onclick="createRipple(event)"> <i class="fab fa-facebook-f"></i> </div> <div class="tooltip">Share on Facebook</div> </div> <div class="social-button-wrapper"> <div class="social-button twitter" onclick="createRipple(event)"> <i class="fab fa-twitter"></i> </div> <div class="tooltip">Share on Twitter</div> </div> <div class="social-button-wrapper"> <div class="social-button instagram" onclick="createRipple(event)"> <i class="fab fa-instagram"></i> </div> <div class="tooltip">Share on Instagram</div> </div> <div class="social-button-wrapper"> <div class="social-button tiktok" onclick="createRipple(event)"> <i class="fab fa-tiktok"></i> </div> <div class="tooltip">Share on TikTok</div> </div> <div class="social-button-wrapper"> <div class="social-button whatsapp" onclick="createRipple(event)"> <i class="fab fa-whatsapp"></i> </div> <div class="tooltip">Share on WhatsApp</div> </div> </div> <button class="copy-button" onclick="copyVideoLink()"> <i class="fas fa-link"></i> Copy video link </button> </div> </div> <div class="success-message" id="successMessage">Link copied to clipboard!</div> <script> // Ripple effect function createRipple(event) { const button = event.currentTarget; // Remove existing ripples const ripples = button.getElementsByClassName('ripple'); for (let i = 0; i < ripples.length; i++) { button.removeChild(ripples[i]); } // Create new ripple const ripple = document.createElement('span'); ripple.classList.add('ripple'); const diameter = Math.max(button.clientWidth, button.clientHeight); const radius = diameter / 2; ripple.style.width = ripple.style.height = `${diameter}px`; const rect = button.getBoundingClientRect(); ripple.style.left = `${event.clientX - rect.left - radius}px`; ripple.style.top = `${event.clientY - rect.top - radius}px`; button.appendChild(ripple); // Simulate share action const shareName = button.classList[1]; showMessage(`Sharing on ${shareName.charAt(0).toUpperCase() + shareName.slice(1)}...`); } // Copy link functionality function copyVideoLink() { const dummyLink = "https://streamvibe.example/watch?v=a1b2c3d4e5f"; navigator.clipboard.writeText(dummyLink).then(() => { showMessage("Link copied to clipboard!"); }); } // Show success message function showMessage(message) { const successMessage = document.getElementById('successMessage'); successMessage.textContent = message; successMessage.classList.add('show'); setTimeout(() => { successMessage.classList.remove('show'); }, 2000); } // Create floating particles document.addEventListener('DOMContentLoaded', () => { const particlesContainer = document.getElementById('particles'); const colors = ['#ff2d71', '#00b8ff', '#9d4edd', '#39ff14']; const totalParticles = 25; for (let i = 0; i < totalParticles; i++) { const size = Math.random() * 4 + 1; const color = colors[Math.floor(Math.random() * colors.length)]; const particle = document.createElement('div'); particle.classList.add('particle'); particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.backgroundColor = color; particle.style.boxShadow = `0 0 ${size * 2}px ${color}`; // Random position particle.style.left = `${Math.random() * 100}%`; particle.style.top = `${Math.random() * 100}%`; // Random animation const animationDuration = Math.random() * 50 + 30; particle.style.animation = `particle-animation ${animationDuration}s linear infinite`; // Set a unique animation with keyframes const keyframes = ` @keyframes particle-animation { 0% { transform: translate(0, 0); opacity: ${Math.random() * 0.5 + 0.3}; } 25% { transform: translate(${Math.random() * 50 - 25}px, ${Math.random() * 50 - 25}px); opacity: ${Math.random() * 0.5 + 0.3}; } 50% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px); opacity: ${Math.random() * 0.5 + 0.5}; } 75% { transform: translate(${Math.random() * 50 - 25}px, ${Math.random() * 50 - 25}px); opacity: ${Math.random() * 0.5 + 0.3}; } 100% { transform: translate(0, 0); opacity: ${Math.random() * 0.5 + 0.3}; } } `; const styleElement = document.createElement('style'); styleElement.appendChild(document.createTextNode(keyframes)); document.head.appendChild(styleElement); particlesContainer.appendChild(particle); } // Add hover effect to video play button const videoPlayButton = document.querySelector('.video-play-button'); videoPlayButton.addEventListener('click', () => { showMessage('Starting video...'); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SummerFest 2024 - Share and Join Us!</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); :root { --primary: #FF5E7D; --secondary: #6C63FF; --accent1: #4ECDC4; --accent2: #FFD166; --dark: #2D3142; --light: #F7F9FC; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background-color: var(--light); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; color: var(--dark); } .container { width: 100%; max-width: 650px; padding: 2rem; border-radius: 20px; background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.5) 100%); backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); position: relative; z-index: 1; overflow: hidden; } .bg-shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; } .shape { position: absolute; border-radius: 50%; filter: blur(20px); opacity: 0.5; } .shape-1 { background: var(--primary); width: 250px; height: 250px; top: -100px; left: -100px; animation: float 8s ease-in-out infinite; } .shape-2 { background: var(--secondary); width: 200px; height: 200px; bottom: -80px; right: -80px; animation: float 10s ease-in-out infinite reverse; } .shape-3 { background: var(--accent1); width: 150px; height: 150px; bottom: 100px; left: -50px; animation: float 9s ease-in-out infinite 1s; } .shape-4 { background: var(--accent2); width: 120px; height: 120px; top: 80px; right: -30px; animation: float 7s ease-in-out infinite 0.5s; } @keyframes float { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(15px, 15px) rotate(5deg); } 100% { transform: translate(0, 0) rotate(0deg); } } h1 { font-size: 2.2rem; font-weight: 700; margin-bottom: 1rem; background: linear-gradient(to right, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; } .event-details { margin-bottom: 2rem; position: relative; } .event-date { font-size: 1.1rem; color: var(--dark); margin-bottom: 0.5rem; font-weight: 500; display: flex; align-items: center; justify-content: center; } .event-date i { margin-right: 0.5rem; } .event-location { display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--dark); margin-bottom: 1rem; } .event-location i { margin-right: 0.5rem; } .event-description { text-align: center; line-height: 1.6; margin-bottom: 1rem; } .share-section { background: rgba(255, 255, 255, 0.7); border-radius: 16px; padding: 1.5rem; text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); } .share-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--dark); } .share-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .share-button { position: relative; width: 70px; height: 70px; border-radius: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .share-button:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%); z-index: 1; } .share-button i { font-size: 1.8rem; color: white; z-index: 2; position: relative; } .share-count { position: absolute; top: -10px; right: -10px; background: var(--light); color: var(--dark); font-size: 0.75rem; font-weight: 600; width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); z-index: 2; transition: transform 0.2s ease; } .facebook { background: #3b5998; } .twitter { background: #1DA1F2; } .instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); } .linkedin { background: #0077B5; } .share-button:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); } .share-button:active { transform: translateY(0) scale(0.95); } .share-button.active .share-count { transform: scale(1.3); background: var(--accent2); } .share-status { font-size: 0.9rem; color: var(--dark); margin-top: 1rem; opacity: 0; transition: opacity 0.3s ease; } .share-status.visible { opacity: 1; } .progress-bar { width: 100%; height: 8px; background: rgba(0,0,0,0.1); border-radius: 10px; margin-top: 1.5rem; overflow: hidden; position: relative; } .progress { height: 100%; background: linear-gradient(to right, var(--accent1), var(--secondary)); width: 0; border-radius: 10px; transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1); position: relative; } .progress:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%); animation: shine 2s infinite; } @keyframes shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .progress-text { display: flex; justify-content: space-between; font-size: 0.85rem; margin-top: 0.5rem; color: var(--dark); } .confetti { position: fixed; width: 10px; height: 10px; background-color: #f00; border-radius: 50%; pointer-events: none; opacity: 0; z-index: 100; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .pulse { animation: pulse 0.5s ease; } @keyframes confettiFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } } @media (max-width: 600px) { .container { padding: 1.5rem; margin: 1rem; } h1 { font-size: 1.8rem; } .share-button { width: 60px; height: 60px; } .share-button i { font-size: 1.5rem; } } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body> <div class="container"> <div class="bg-shapes"> <div class="shape shape-1"></div> <div class="shape shape-2"></div> <div class="shape shape-3"></div> <div class="shape shape-4"></div> </div> <div class="event-details"> <h1>SummerFest 2024</h1> <p class="event-date"><i class="fas fa-calendar-alt"></i> July 15-17, 2024</p> <p class="event-location"><i class="fas fa-map-marker-alt"></i> Oceanside Park, Miami</p> <p class="event-description">Three days of music, art, and celebration! Join us for the biggest beach festival of the summer featuring top artists, immersive art installations, and unforgettable experiences.</p> </div> <div class="share-section"> <h2 class="share-title">Spread the summer vibes! Share with friends</h2> <div class="share-buttons"> <div class="share-button facebook" data-platform="Facebook"> <i class="fab fa-facebook-f"></i> <div class="share-count">87</div> </div> <div class="share-button twitter" data-platform="Twitter"> <i class="fab fa-twitter"></i> <div class="share-count">53</div> </div> <div class="share-button instagram" data-platform="Instagram"> <i class="fab fa-instagram"></i> <div class="share-count">124</div> </div> <div class="share-button linkedin" data-platform="LinkedIn"> <i class="fab fa-linkedin-in"></i> <div class="share-count">41</div> </div> </div> <div class="share-status">Thanks for sharing on <span id="platform-name"></span>!</div> <div class="progress-bar"> <div class="progress" id="share-progress"></div> </div> <div class="progress-text"> <span>0 shares</span> <span>Goal: 500 shares</span> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const shareButtons = document.querySelectorAll('.share-button'); const shareStatus = document.querySelector('.share-status'); const platformName = document.getElementById('platform-name'); const progressBar = document.getElementById('share-progress'); const totalShares = Array.from(shareButtons).reduce((sum, button) => { return sum + parseInt(button.querySelector('.share-count').innerText); }, 0); // Set initial progress updateProgress(totalShares); shareButtons.forEach(button => { button.addEventListener('click', function() { // Get platform name const platform = this.getAttribute('data-platform'); platformName.textContent = platform; // Get current share count and increment const countElement = this.querySelector('.share-count'); let count = parseInt(countElement.innerText); count++; countElement.innerText = count; // Add active class for animation this.classList.add('active'); setTimeout(() => { this.classList.remove('active'); }, 500); // Show share status shareStatus.classList.add('visible'); setTimeout(() => { shareStatus.classList.remove('visible'); }, 3000); // Update progress bar const newTotalShares = Array.from(shareButtons).reduce((sum, btn) => { return sum + parseInt(btn.querySelector('.share-count').innerText); }, 0); updateProgress(newTotalShares); // Create confetti effect createConfetti(this); // Pulse animation on counter countElement.classList.add('pulse'); setTimeout(() => { countElement.classList.remove('pulse'); }, 500); }); }); function updateProgress(shares) { const goal = 500; const percentage = Math.min((shares / goal) * 100, 100); progressBar.style.width = `${percentage}%`; document.querySelector('.progress-text span:first-child').textContent = `${shares} shares`; } function createConfetti(button) { const colors = ['#FF5E7D', '#6C63FF', '#4ECDC4', '#FFD166', '#2D3142']; const buttonRect = button.getBoundingClientRect(); for (let i = 0; i < 15; i++) { const confetti = document.createElement('div'); confetti.className = 'confetti'; confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; // Random size const size = Math.random() * 8 + 5; confetti.style.width = `${size}px`; confetti.style.height = `${size}px`; // Position confetti at the button's center const centerX = buttonRect.left + buttonRect.width / 2; const centerY = buttonRect.top + buttonRect.height / 2; confetti.style.left = `${centerX}px`; confetti.style.top = `${centerY}px`; document.body.appendChild(confetti); // Random animation duration const duration = Math.random() * 2 + 1; confetti.style.animation = `confettiFall ${duration}s ease forwards`; // Remove confetti after animation completes setTimeout(() => { confetti.remove(); }, duration * 1000); } } // Interactive hover effects shareButtons.forEach(button => { button.addEventListener('mouseover', function() { const countElement = this.querySelector('.share-count'); countElement.style.transform = 'scale(1.2)'; }); button.addEventListener('mouseout', function() { const countElement = this.querySelector('.share-count'); countElement.style.transform = 'scale(1)'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Material Social Share Buttons</title> <style> :root { --primary-color: #6200ee; --primary-variant: #3700b3; --secondary-color: #03dac6; --secondary-variant: #018786; --error-color: #b00020; --surface-color: #ffffff; --on-surface-dark: #121212; --shadow-color: rgba(0, 0, 0, 0.2); --shadow-color-hover: rgba(0, 0, 0, 0.3); --text-color: #000000; --text-color-secondary: #757575; --facebook-color: #1877F2; --twitter-color: #1DA1F2; --instagram-color: #E4405F; --linkedin-color: #0077B5; --pinterest-color: #E60023; --whatsapp-color: #25D366; } [data-theme="dark"] { --surface-color: #121212; --on-surface-dark: #ffffff; --shadow-color: rgba(255, 255, 255, 0.1); --shadow-color-hover: rgba(255, 255, 255, 0.15); --text-color: #ffffff; --text-color-secondary: #b0b0b0; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; } body { background-color: var(--surface-color); color: var(--text-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; transition: background-color 0.3s ease; padding: 20px; } .container { max-width: 650px; width: 100%; border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 24px; background-color: var(--surface-color); display: flex; flex-direction: column; gap: 24px; transition: all 0.3s ease; } .header { display: flex; justify-content: space-between; align-items: center; } .header h1 { font-size: 24px; font-weight: 500; color: var(--text-color); } .theme-toggle { width: 56px; height: 32px; background-color: var(--primary-color); border-radius: 16px; position: relative; cursor: pointer; display: flex; align-items: center; padding: 4px; transition: background-color 0.3s ease; box-shadow: 0 2px 8px var(--shadow-color); } .theme-toggle-thumb { width: 24px; height: 24px; background-color: white; border-radius: 50%; position: absolute; transform: translateX(0); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; display: flex; justify-content: center; align-items: center; color: var(--primary-color); font-size: 14px; } [data-theme="dark"] .theme-toggle-thumb { transform: translateX(24px); } .content-card { background-color: var(--surface-color); border-radius: 12px; box-shadow: 0 4px 12px var(--shadow-color); padding: 20px; transition: box-shadow 0.3s ease; } .content-card:hover { box-shadow: 0 8px 16px var(--shadow-color-hover); } .content-image { width: 100%; height: 200px; background-image: url('https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80'); background-size: cover; background-position: center; border-radius: 8px; margin-bottom: 16px; } .content-title { font-size: 20px; font-weight: 500; margin-bottom: 8px; color: var(--text-color); } .content-text { font-size: 16px; line-height: 1.5; color: var(--text-color-secondary); margin-bottom: 24px; } .share-container { width: 100%; } .share-text { font-size: 14px; font-weight: 500; margin-bottom: 12px; color: var(--text-color-secondary); } .share-buttons { display: flex; flex-wrap: wrap; gap: 12px; } .share-button { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 24px; padding: 0 20px; background-color: var(--surface-color); color: var(--text-color); border: none; outline: none; cursor: pointer; font-size: 14px; font-weight: 500; box-shadow: 0 4px 8px var(--shadow-color); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; user-select: none; } .share-button::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.5); opacity: 0; border-radius: 100%; transform: scale(1) translate(-50%, -50%); transform-origin: 0% 0%; } .share-button:active::after { opacity: 1; transform: scale(50) translate(-50%, -50%); transition: transform 0.5s, opacity 0.3s; } .share-button:hover { box-shadow: 0 6px 12px var(--shadow-color-hover); transform: translateY(-2px); } .share-button:active { transform: translateY(0); box-shadow: 0 2px 4px var(--shadow-color); } .share-button-icon { margin-right: 8px; font-size: 18px; display: flex; align-items: center; justify-content: center; } .share-button-text { white-space: nowrap; } .share-button.facebook { background-color: var(--facebook-color); color: white; } .share-button.twitter { background-color: var(--twitter-color); color: white; } .share-button.linkedin { background-color: var(--linkedin-color); color: white; } .share-button.pinterest { background-color: var(--pinterest-color); color: white; } .share-button.whatsapp { background-color: var(--whatsapp-color); color: white; } .share-count { display: flex; align-items: center; justify-content: center; margin-top: 24px; color: var(--text-color-secondary); font-size: 14px; animation: fadeIn 0.5s ease; } .share-count-icon { margin-right: 8px; display: flex; align-items: center; justify-content: center; } .success-message { background-color: var(--secondary-color); border-radius: 4px; padding: 8px 16px; margin-top: 16px; display: flex; align-items: center; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; color: var(--on-surface-dark); } .success-message.show { opacity: 1; transform: translateY(0); } .success-message-icon { margin-right: 8px; display: flex; align-items: center; justify-content: center; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse { animation: pulse 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* For compact screens */ @media (max-width: 600px) { .container { padding: 16px; } .share-buttons { flex-wrap: wrap; justify-content: center; } .share-button { flex: 0 0 calc(50% - 12px); justify-content: center; padding: 0 12px; } } /* For very small screens */ @media (max-width: 400px) { .share-button { flex: 0 0 100%; } } </style> </head> <body> <div class="container"> <div class="header"> <h1>Social Sharing</h1> <div class="theme-toggle" id="themeToggle"> <div class="theme-toggle-thumb" id="themeToggleThumb"> <span id="themeIcon">🌞</span> </div> </div> </div> <div class="content-card"> <div class="content-image"></div> <h2 class="content-title">Design Trends 2023: Material Shadows & Flattened Icons</h2> <p class="content-text">Material design evolves in 2023 with more tactile interactions, deeper shadows for depth perception, and simplified iconography. The focus on motion and responsive feedback makes user experience more intuitive across platforms, particularly on touch devices.</p> <div class="share-container"> <p class="share-text">Share this article with your network</p> <div class="share-buttons"> <button class="share-button facebook" data-platform="facebook"> <span class="share-button-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 2H15C13.6739 2 12.4021 2.52678 11.4645 3.46447C10.5268 4.40215 10 5.67392 10 7V10H7V14H10V22H14V14H17L18 10H14V7C14 6.73478 14.1054 6.48043 14.2929 6.29289C14.4804 6.10536 14.7348 6 15 6H18V2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> <span class="share-button-text">Facebook</span> </button> <button class="share-button twitter" data-platform="twitter"> <span class="share-button-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M23 3C22.0424 3.67548 20.9821 4.19211 19.86 4.53C19.2577 3.83751 18.4573 3.34669 17.567 3.12393C16.6767 2.90116 15.7395 2.9572 14.8821 3.28445C14.0247 3.6117 13.2884 4.19439 12.773 4.9537C12.2575 5.71302 11.9877 6.61234 12 7.53V8.53C10.2426 8.57557 8.50127 8.18581 6.93101 7.39545C5.36074 6.60508 4.01032 5.43864 3 4C3 4 -1 13 8 17C5.94053 18.398 3.48716 19.0989 1 19C10 24 21 19 21 7.5C20.9991 7.22145 20.9723 6.94359 20.92 6.67C21.9406 5.66349 22.6608 4.39271 23 3V3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> <span class="share-button-text">Twitter</span> </button> <button class="share-button linkedin" data-platform="linkedin"> <span class="share-button-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16 8C17.5913 8 19.1174 8.63214 20.2426 9.75736C21.3679 10.8826 22 12.4087 22 14V21H18V14C18 13.4696 17.7893 12.9609 17.4142 12.5858C17.0391 12.2107 16.5304 12 16 12C15.4696 12 14.9609 12.2107 14.5858 12.5858C14.2107 12.9609 14 13.4696 14 14V21H10V14C10 12.4087 10.6321 10.8826 11.7574 9.75736C12.8826 8.63214 14.4087 8 16 8V8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6 9H2V21H6V9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M4 6C5.10457 6 6 5.10457 6 4C6 2.89543 5.10457 2 4 2C2.89543 2 2 2.89543 2 4C2 5.10457 2.89543 6 4 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> <span class="share-button-text">LinkedIn</span> </button> <button class="share-button pinterest" data-platform="pinterest"> <span class="share-button-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8.5 8.5L15.5 15.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> <span class="share-button-text">Pinterest</span> </button> <button class="share-button whatsapp" data-platform="whatsapp"> <span class="share-button-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17 2H7C4.23858 2 2 4.23858 2 7V17C2 19.7614 4.23858 22 7 22H17C19.7614 22 22 19.7614 22 17V7C22 4.23858 19.7614 2 17 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16 11.37C16.1234 12.2022 15.9813 13.0522 15.5938 13.799C15.2063 14.5458 14.5931 15.1514 13.8416 15.5297C13.0901 15.9079 12.2384 16.0396 11.4078 15.9059C10.5771 15.7723 9.80976 15.3801 9.21484 14.7852C8.61992 14.1902 8.22773 13.4229 8.09407 12.5922C7.9604 11.7615 8.09207 10.9099 8.47033 10.1584C8.84859 9.40685 9.45419 8.79374 10.201 8.40624C10.9478 8.01874 11.7978 7.87659 12.63 8C13.4789 8.12588 14.2649 8.52146 14.8717 9.12831C15.4785 9.73515 15.8741 10.5211 16 11.37Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> <span class="share-button-text">WhatsApp</span> </button> </div> <div class="success-message" id="successMessage"> <span class="success-message-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M22 11.08V12C21.9988 14.1564 21.3005 16.2547 20.0093 17.9818C18.7182 19.709 16.9033 20.9725 14.8354 21.5839C12.7674 22.1953 10.5573 22.1219 8.53447 21.3746C6.51168 20.6273 4.78465 19.2461 3.61096 17.4371C2.43727 15.628 1.87979 13.4881 2.02168 11.3363C2.16356 9.18457 2.99721 7.13633 4.39828 5.49707C5.79935 3.85782 7.69279 2.71538 9.79619 2.24015C11.8996 1.76491 14.1003 1.98234 16.07 2.86" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M22 4L12 14.01L9 11.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> <span id="successMessageText"></span> </div> <div class="share-count" id="shareCount"> <span class="share-count-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 6.65685 16.3431 8 18 8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6 15C7.65685 15 9 13.6569 9 12C9 10.3431 7.65685 9 6 9C4.34315 9 3 10.3431 3 12C3 13.6569 4.34315 15 6 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M18 22C19.6569 22 21 20.6569 21 19C21 17.3431 19.6569 16 18 16C16.3431 16 15 17.3431 15 19C15 20.6569 16.3431 22 18 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8.59 13.51L15.42 17.49" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M15.41 6.51L8.59 10.49" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> <span>Shared 128 times</span> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Theme toggle functionality const themeToggle = document.getElementById('themeToggle'); const themeToggleThumb = document.getElementById('themeToggleThumb'); const themeIcon = document.getElementById('themeIcon'); let isDarkMode = false; themeToggle.addEventListener('click', function() { isDarkMode = !isDarkMode; document.body.setAttribute('data-theme', isDarkMode ? 'dark' : 'light'); themeIcon.textContent = isDarkMode ? '🌙' : '🌞'; }); // Share buttons functionality const shareButtons = document.querySelectorAll('.share-button'); const successMessage = document.getElementById('successMessage'); const successMessageText = document.getElementById('successMessageText'); let shareCount = 128; const shareCountElement = document.getElementById('shareCount'); shareButtons.forEach(button => { button.addEventListener('click', function() { const platform = this.getAttribute('data-platform'); // Add ripple effect this.classList.add('pulse'); setTimeout(() => { this.classList.remove('pulse'); }, 500); // Simulate sharing (in a real app, this would use Web Share API or platform-specific share links) simulateShare(platform); // Update share count shareCount++; updateShareCount(); // Show success message showSuccessMessage(platform); }); }); function simulateShare(platform) { console.log(`Shared to ${platform}`); // In a real implementation, this would use the appropriate sharing mechanism } function showSuccessMessage(platform) { successMessageText.textContent = `Successfully shared to ${platform}!`; successMessage.classList.add('show'); setTimeout(() => { successMessage.classList.remove('show'); }, 3000); } function updateShareCount() { shareCountElement.innerHTML = ` <span class="share-count-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 6.65685 16.3431 8 18 8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6 15C7.65685 15 9 13.6569 9 12C9 10.3431 7.65685 9 6 9C4.34315 9 3 10.3431 3 12C3 13.6569 4.34315 15 6 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M18 22C19.6569 22 21 20.6569 21 19C21 17.3431 19.6569 16 18 16C16.3431 16 15 17.3431 15 19C15 20.6569 16.3431 22 18 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8.59 13.51L15.42 17.49" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M15.41 6.51L8.59 10.49" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> <span>Shared ${shareCount} times</span> `; // Add animation to the counter shareCountElement.classList.remove('pulse'); void shareCountElement.offsetWidth; // Force reflow shareCountElement.classList.add('pulse'); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Modern Retro Share Buttons</title> <style> :root { --primary: #FF3366; --secondary: #33CCFF; --tertiary: #FFCC00; --quaternary: #66FF99; --dark: #222233; --light: #F8F9FA; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Courier New', monospace; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: var(--light); color: var(--dark); overflow-x: hidden; padding: 20px; } .magazine-container { max-width: 650px; width: 100%; background-color: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; position: relative; } .magazine-header { padding: 25px; background: var(--dark); color: var(--light); text-align: center; position: relative; } .magazine-title { font-size: 2.5rem; font-weight: bold; letter-spacing: -1px; margin-bottom: 8px; background: linear-gradient(45deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase; } .magazine-subtitle { font-size: 1rem; opacity: 0.8; margin-bottom: 15px; } .magazine-content { padding: 25px; line-height: 1.6; } .magazine-heading { font-size: 1.8rem; margin-bottom: 20px; color: var(--primary); border-bottom: 3px solid var(--tertiary); padding-bottom: 10px; display: inline-block; } .magazine-text { margin-bottom: 20px; } .share-container { margin-top: 30px; position: relative; padding: 25px; border-radius: 8px; background: linear-gradient(135deg, #f5f7fa 0%, #e9e9e9 100%); } .share-label { font-size: 1.2rem; font-weight: bold; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--dark); position: relative; display: inline-block; } .share-label::after { content: ''; position: absolute; width: 100%; height: 3px; bottom: -5px; left: 0; background: var(--primary); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; } .share-container:hover .share-label::after { transform: scaleX(1); transform-origin: left; } .share-buttons { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; } .share-button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border-radius: 8px; background: white; cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); width: 90px; } .share-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); transform: translateY(100%); transition: transform 0.3s ease; z-index: 0; } .share-button:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); } .share-button:hover::before { transform: translateY(0); } .share-button.twitter { border-bottom: 5px solid var(--secondary); } .share-button.facebook { border-bottom: 5px solid #3b5998; } .share-button.pinterest { border-bottom: 5px solid #cb2027; } .share-button.linkedin { border-bottom: 5px solid #0077b5; } .share-button.email { border-bottom: 5px solid var(--tertiary); } .share-button i { font-size: 24px; z-index: 1; transition: transform 0.3s ease; } .share-button:hover i { transform: scale(1.2); } .share-button span { font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; z-index: 1; } .share-button.twitter i { color: var(--secondary); } .share-button.facebook i { color: #3b5998; } .share-button.pinterest i { color: #cb2027; } .share-button.linkedin i { color: #0077b5; } .share-button.email i { color: var(--tertiary); } .share-count { position: absolute; top: -10px; right: -10px; background: var(--primary); color: white; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 12px; font-weight: bold; opacity: 0; transform: scale(0); transition: all 0.3s ease; } .share-button.shared .share-count { opacity: 1; transform: scale(1); } .share-success { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px); background: var(--dark); color: var(--light); padding: 15px 25px; border-radius: 50px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 10px; opacity: 0; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); z-index: 10; } .share-success.show { transform: translateX(-50%) translateY(0); opacity: 1; } .share-success i { color: var(--quaternary); } /* Pattern Background */ .pattern-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(var(--primary) 2px, transparent 2px), radial-gradient(var(--secondary) 2px, transparent 2px); background-size: 30px 30px; background-position: 0 0, 15px 15px; opacity: 0.05; pointer-events: none; } .stats-bar { display: flex; margin-top: 30px; background: var(--dark); border-radius: 8px; overflow: hidden; height: 40px; } .stats-item { flex: 1; height: 100%; position: relative; transition: all 0.3s ease; } .stats-item-fill { position: absolute; bottom: 0; left: 0; width: 100%; background: var(--primary); transition: height 1s cubic-bezier(0.19, 1, 0.22, 1); } .stats-item:nth-child(2) .stats-item-fill { background: var(--secondary); } .stats-item:nth-child(3) .stats-item-fill { background: var(--tertiary); } .stats-item:nth-child(4) .stats-item-fill { background: var(--quaternary); } .stats-item:nth-child(5) .stats-item-fill { background: var(--primary); } .tooltip { position: absolute; background: var(--dark); color: white; padding: 5px 10px; border-radius: 4px; font-size: 12px; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; } .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: var(--dark) transparent transparent transparent; } .share-button:hover .tooltip { opacity: 1; visibility: visible; } /* Responsive styles */ @media (max-width: 600px) { .magazine-title { font-size: 2rem; } .magazine-heading { font-size: 1.5rem; } .share-buttons { gap: 10px; } .share-button { width: 70px; padding: 10px; } .share-button i { font-size: 20px; } .share-button span { font-size: 10px; } } @media (max-width: 400px) { .magazine-title { font-size: 1.7rem; } .share-buttons { flex-direction: column; align-items: center; } .share-button { width: 100%; max-width: 200px; flex-direction: row; justify-content: center; } } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <div class="magazine-container"> <div class="pattern-bg"></div> <div class="magazine-header"> <h1 class="magazine-title">ByteStyle</h1> <p class="magazine-subtitle">Digital Culture & Design Trends</p> </div> <div class="magazine-content"> <h2 class="magazine-heading">The Power of Social Sharing</h2> <p class="magazine-text">In today's hyperconnected design world, the right share button can increase content reach by up to 37%. Our latest research shows that animated, visually distinct buttons with modern-retro aesthetics generate 2.8x more engagement than standard options.</p> <p class="magazine-text">Below, explore our custom-crafted share buttons that blend nostalgic typography with contemporary iconography - perfectly balanced for both visual impact and functional simplicity.</p> <div class="share-container"> <div class="share-label">Spread the word</div> <div class="share-buttons"> <div class="share-button twitter" data-platform="Twitter"> <i class="fab fa-twitter"></i> <span>Tweet</span> <div class="share-count">0</div> <div class="tooltip">Share to Twitter</div> </div> <div class="share-button facebook" data-platform="Facebook"> <i class="fab fa-facebook-f"></i> <span>Share</span> <div class="share-count">0</div> <div class="tooltip">Share to Facebook</div> </div> <div class="share-button pinterest" data-platform="Pinterest"> <i class="fab fa-pinterest-p"></i> <span>Pin</span> <div class="share-count">0</div> <div class="tooltip">Save to Pinterest</div> </div> <div class="share-button linkedin" data-platform="LinkedIn"> <i class="fab fa-linkedin-in"></i> <span>Post</span> <div class="share-count">0</div> <div class="tooltip">Share to LinkedIn</div> </div> <div class="share-button email" data-platform="Email"> <i class="fas fa-envelope"></i> <span>Email</span> <div class="share-count">0</div> <div class="tooltip">Send via Email</div> </div> </div> <div class="stats-bar"> <div class="stats-item"> <div class="stats-item-fill" style="height: 0%"></div> </div> <div class="stats-item"> <div class="stats-item-fill" style="height: 0%"></div> </div> <div class="stats-item"> <div class="stats-item-fill" style="height: 0%"></div> </div> <div class="stats-item"> <div class="stats-item-fill" style="height: 0%"></div> </div> <div class="stats-item"> <div class="stats-item-fill" style="height: 0%"></div> </div> </div> </div> </div> </div> <div class="share-success"> <i class="fas fa-check-circle"></i> <span>Successfully shared to <span id="shareTarget"></span>!</span> </div> <script> document.addEventListener('DOMContentLoaded', function() { const shareButtons = document.querySelectorAll('.share-button'); const statsItems = document.querySelectorAll('.stats-item-fill'); const shareSuccess = document.querySelector('.share-success'); const shareTarget = document.getElementById('shareTarget'); const statsTotals = [0, 0, 0, 0, 0]; // Initialize the stats with random values setTimeout(() => { statsItems.forEach((item, index) => { const randomHeight = Math.floor(Math.random() * 40) + 10; item.style.height = `${randomHeight}%`; statsTotals[index] = Math.floor(randomHeight / 10); }); }, 500); shareButtons.forEach((button, index) => { button.addEventListener('click', function() { // Get platform name const platform = this.getAttribute('data-platform'); // Update share count const countEl = this.querySelector('.share-count'); let count = parseInt(countEl.textContent); count++; countEl.textContent = count; // Mark as shared this.classList.add('shared'); // Update stats bar statsTotals[index]++; const newHeight = Math.min(10 + (statsTotals[index] * 10), 100); statsItems[index].style.height = `${newHeight}%`; // Show success notification shareTarget.textContent = platform; shareSuccess.classList.add('show'); setTimeout(() => { shareSuccess.classList.remove('show'); }, 3000); // Add magnetic effect on hover button.addEventListener('mousemove', function(e) { const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; const deltaX = (x - centerX) / centerX; const deltaY = (y - centerY) / centerY; this.style.transform = `translateX(${deltaX * 5}px) translateY(${deltaY * 5}px)`; }); button.addEventListener('mouseleave', function() { this.style.transform = ''; }); }); }); // Dynamic pattern background on mouse move document.addEventListener('mousemove', function(e) { const patternBg = document.querySelector('.pattern-bg'); const x = e.clientX / window.innerWidth * 10; const y = e.clientY / window.innerHeight * 10; patternBg.style.backgroundPosition = `${x}px ${y}px, ${x + 15}px ${y + 15}px`; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>EduShare: Social Sharing Platform</title> <style> :root { --primary-blue: #2196F3; --primary-red: #F44336; --primary-yellow: #FFEB3B; --primary-green: #4CAF50; --light-gray: #f5f5f5; --dark-gray: #333; --focus-outline: 3px solid rgba(33, 150, 243, 0.6); --transition-speed: 0.3s; --border-radius: 12px; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f9f9f9; display: flex; justify-content: center; align-items: center; min-height: 700px; width: 100%; max-width: 700px; margin: 0 auto; padding: 20px; overflow-x: hidden; } .edu-share-container { width: 100%; max-width: 600px; background: white; border-radius: var(--border-radius); padding: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; } .edu-share-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 8px; background: linear-gradient(90deg, var(--primary-blue), var(--primary-red), var(--primary-yellow), var(--primary-green)); } h1 { font-size: 28px; margin-bottom: 20px; color: var(--dark-gray); position: relative; } h1::after { content: ""; position: absolute; bottom: -10px; left: 0; width: 60px; height: 4px; background-color: var(--primary-blue); border-radius: 2px; } p.content-description { margin-bottom: 25px; line-height: 1.6; color: #555; } .resource-preview { background-color: var(--light-gray); border-radius: var(--border-radius); padding: 20px; margin-bottom: 30px; border: 1px solid #e0e0e0; position: relative; } .resource-preview h3 { font-size: 18px; margin-bottom: 10px; color: var(--dark-gray); } .resource-preview p { font-size: 14px; color: #666; margin-bottom: 15px; } .resource-meta { display: flex; align-items: center; font-size: 13px; color: #888; } .resource-meta .tag { background-color: rgba(33, 150, 243, 0.1); color: var(--primary-blue); padding: 4px 8px; border-radius: 4px; margin-right: 10px; font-weight: 500; } .resource-meta .time { display: flex; align-items: center; } .resource-meta .time svg { margin-right: 4px; height: 14px; } h2 { font-size: 20px; margin-bottom: 20px; color: var(--dark-gray); } .share-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 15px; margin-bottom: 30px; } .share-button { position: relative; display: flex; flex-direction: column; align-items: center; padding: 20px 10px; border-radius: var(--border-radius); border: none; cursor: pointer; transition: transform var(--transition-speed), box-shadow var(--transition-speed); overflow: hidden; color: white; font-weight: 600; text-align: center; } .share-button:focus { outline: var(--focus-outline); outline-offset: 2px; } .share-button:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .share-button:active { transform: translateY(0); } .share-button .icon { font-size: 24px; margin-bottom: 10px; transition: transform 0.3s; } .share-button:hover .icon { transform: scale(1.2); } .share-button .label { font-size: 14px; transition: opacity 0.3s; } .share-button::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(255, 255, 255, 0.1); transform: translateY(100%); transition: transform 0.3s ease; } .share-button:hover::after { transform: translateY(0); } .facebook { background-color: #3b5998; } .twitter { background-color: #1da1f2; } .email { background-color: #ea4335; } .classroom { background-color: #0F9D58; } .success-message { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); background: white; padding: 20px 30px; border-radius: var(--border-radius); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); text-align: center; opacity: 0; visibility: hidden; transition: all 0.3s; z-index: 100; max-width: 300px; } .success-message.show { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .success-message .icon { font-size: 40px; color: var(--primary-green); margin-bottom: 15px; } .success-message p { margin-bottom: 15px; color: #555; } .success-message .share-details { background-color: var(--light-gray); padding: 10px; border-radius: 6px; margin-bottom: 15px; text-align: left; font-size: 14px; } .success-message .close-btn { background-color: var(--primary-blue); color: white; border: none; padding: 8px 20px; border-radius: 4px; cursor: pointer; font-weight: 600; transition: background-color 0.3s; } .success-message .close-btn:hover { background-color: #1976D2; } .success-message .close-btn:focus { outline: var(--focus-outline); outline-offset: 2px; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: all 0.3s; z-index: 99; } .overlay.show { opacity: 1; visibility: visible; } .share-options { margin-top: 20px; } .option-toggle { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .option-toggle label { display: flex; align-items: center; font-size: 15px; color: #555; } .tooltip { display: inline-block; margin-left: 8px; position: relative; cursor: help; } .tooltip-icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background-color: #e0e0e0; color: #555; font-size: 12px; font-weight: bold; } .tooltip-text { position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); background-color: #333; color: white; padding: 8px 12px; border-radius: 4px; width: 200px; font-size: 12px; visibility: hidden; opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 10; } .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; } .toggle-switch { position: relative; display: inline-block; width: 50px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; } .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .toggle-slider { background-color: var(--primary-blue); } input:focus + .toggle-slider { box-shadow: 0 0 1px var(--primary-blue); } input:checked + .toggle-slider:before { transform: translateX(24px); } @media (max-width: 600px) { .edu-share-container { padding: 20px; } h1 { font-size: 24px; } .share-buttons { grid-template-columns: repeat(2, 1fr); } } </style> </head> <body> <div class="edu-share-container"> <h1>Share Learning Resource</h1> <p class="content-description">Help fellow educators discover this valuable teaching material by sharing it with your professional network.</p> <div class="resource-preview"> <h3>Adaptive Learning Assessment Framework</h3> <p>A comprehensive guide to implementing personalized learning pathways through formative assessment strategies and differentiated instruction techniques.</p> <div class="resource-meta"> <span class="tag">Pedagogy</span> <span class="time"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 6 12 12 16 14"></polyline> </svg> 15 min read </span> </div> </div> <h2>Share with colleagues</h2> <div class="share-buttons"> <button class="share-button facebook" aria-label="Share on Facebook"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path> </svg> </div> <span class="label">Facebook</span> </button> <button class="share-button twitter" aria-label="Share on Twitter"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path> </svg> </div> <span class="label">Twitter</span> </button> <button class="share-button email" aria-label="Share via Email"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path> <polyline points="22,6 12,13 2,6"></polyline> </svg> </div> <span class="label">Email</span> </button> <button class="share-button classroom" aria-label="Share to Google Classroom"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> <path d="M3 6v12h18V6H3zm5.5 9H5V9h3.5v6zm6.5 0h-5V9h5v6zm4 0h-3V9h3v6z"></path> </svg> </div> <span class="label">Classroom</span> </button> </div> <div class="share-options"> <div class="option-toggle"> <label> Include resource metrics <div class="tooltip"> <span class="tooltip-icon">?</span> <span class="tooltip-text">Share information about downloads, ratings, and usage data with your colleagues.</span> </div> </label> <label class="toggle-switch"> <input type="checkbox" checked> <span class="toggle-slider"></span> </label> </div> <div class="option-toggle"> <label> Add personalized note <div class="tooltip"> <span class="tooltip-icon">?</span> <span class="tooltip-text">Include a custom message explaining why you're recommending this resource.</span> </div> </label> <label class="toggle-switch"> <input type="checkbox"> <span class="toggle-slider"></span> </label> </div> </div> </div> <div class="success-message"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> <polyline points="22 4 12 14.01 9 11.01"></polyline> </svg> </div> <h3 class="share-title">Resource Shared!</h3> <p class="share-text">Your educational resource has been successfully shared.</p> <div class="share-details"> <p><strong>Platform:</strong> <span id="platform-name">Facebook</span></p> </div> <button class="close-btn">Done</button> </div> <div class="overlay"></div> <script> document.addEventListener('DOMContentLoaded', function() { const shareButtons = document.querySelectorAll('.share-button'); const successMessage = document.querySelector('.success-message'); const overlay = document.querySelector('.overlay'); const closeBtn = document.querySelector('.close-btn'); const platformName = document.getElementById('platform-name'); shareButtons.forEach(button => { button.addEventListener('click', function() { // Get the platform name from the button's class const className = this.classList[1]; let platform = className.charAt(0).toUpperCase() + className.slice(1); // Update the success message with the platform name platformName.textContent = platform; // Show the success message and overlay successMessage.classList.add('show'); overlay.classList.add('show'); // Apply focus to the close button for accessibility setTimeout(() => { closeBtn.focus(); }, 100); }); // Add keyboard accessibility button.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.click(); } }); }); // Close the success message when the close button is clicked closeBtn.addEventListener('click', function() { successMessage.classList.remove('show'); overlay.classList.remove('show'); }); // Close the success message when clicking outside of it overlay.addEventListener('click', function() { successMessage.classList.remove('show'); overlay.classList.remove('show'); }); // Handle keyboard events for closing the modal document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && successMessage.classList.contains('show')) { successMessage.classList.remove('show'); overlay.classList.remove('show'); } }); // Add tab trap within modal for accessibility successMessage.addEventListener('keydown', function(e) { if (e.key === 'Tab') { e.preventDefault(); closeBtn.focus(); } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Watercolor Social Share - Lifestyle App</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f8f5f2; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 700px; padding: 20px; overflow-x: hidden; } .app-container { max-width: 650px; width: 100%; background-color: #ffffff; border-radius: 20px; padding: 30px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; } .watercolor-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CradialGradient id='gradient1' cx='50%25' cy='50%25' r='50%25' fx='50%25' fy='50%25'%3E%3Cstop offset='0%25' stop-color='%23f9e6e7' stop-opacity='0.4'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='gradient2' cx='30%25' cy='70%25' r='40%25' fx='30%25' fy='70%25'%3E%3Cstop offset='0%25' stop-color='%23ddeef8' stop-opacity='0.3'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='gradient3' cx='70%25' cy='30%25' r='35%25' fx='70%25' fy='30%25'%3E%3Cstop offset='0%25' stop-color='%23e5f8e3' stop-opacity='0.3'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='600' height='600' fill='white'/%3E%3Ccircle cx='300' cy='300' r='250' fill='url(%23gradient1)'/%3E%3Ccircle cx='180' cy='420' r='200' fill='url(%23gradient2)'/%3E%3Ccircle cx='420' cy='180' r='180' fill='url(%23gradient3)'/%3E%3C/svg%3E"); opacity: 0.6; z-index: 0; } .content { position: relative; z-index: 10; } h1 { font-size: 2.2rem; color: #333; margin-bottom: 10px; font-weight: 700; } h2 { font-size: 1.3rem; color: #555; margin-bottom: 25px; font-weight: 500; } .post-image { width: 100%; height: 260px; background-color: #f3f3f3; border-radius: 15px; margin-bottom: 20px; overflow: hidden; position: relative; } .post-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; transition: transform 0.5s ease; } .post-content { margin-bottom: 30px; color: #444; line-height: 1.6; } .share-text { font-size: 1.2rem; font-weight: 600; color: #333; margin-bottom: 15px; display: flex; align-items: center; } .share-text svg { width: 24px; height: 24px; margin-right: 8px; } .social-share { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; } .share-button { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80px; height: 90px; border: none; background: transparent; cursor: pointer; transition: transform 0.3s ease; position: relative; } .share-button:hover { transform: scale(1.05); } .share-button:active { transform: scale(0.95); } .share-icon { width: 56px; height: 56px; margin-bottom: 8px; position: relative; display: flex; align-items: center; justify-content: center; } .share-icon img { width: 100%; height: 100%; transition: all 0.3s ease; } .share-button:hover .share-icon img { animation: wobble 0.8s ease infinite; } .share-name { font-size: 0.85rem; color: #555; font-weight: 500; } .success-message { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); padding: 12px 20px; border-radius: 30px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); display: flex; align-items: center; gap: 10px; color: #333; font-weight: 500; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100; opacity: 0; } .success-message.show { transform: translateX(-50%) translateY(0); opacity: 1; } .paint-splash { position: absolute; pointer-events: none; opacity: 0; z-index: 50; } .tag-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; } .tag { background: #f3f3f3; color: #555; padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; display: inline-flex; align-items: center; position: relative; overflow: hidden; } .tag::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); transform: translateX(-100%); transition: transform 0.8s; } .tag:hover::before { transform: translateX(100%); } @keyframes wobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @media (max-width: 600px) { .app-container { padding: 20px; border-radius: 15px; } h1 { font-size: 1.8rem; } h2 { font-size: 1.1rem; margin-bottom: 20px; } .post-image { height: 200px; } .social-share { justify-content: center; } .share-button { width: 70px; height: 80px; } .share-icon { width: 46px; height: 46px; } } </style> </head> <body> <div class="app-container"> <div class="watercolor-bg"></div> <div class="content"> <h1>Morning Yoga Flow</h1> <h2>Start your day with mindful movement</h2> <div class="tag-container"> <div class="tag">#morningroutine</div> <div class="tag">#wellness</div> <div class="tag">#yogaflow</div> <div class="tag">#mindfulness</div> </div> <div class="post-image"> <img src="https://images.unsplash.com/photo-1545205597-3d9d02c29597?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="Morning yoga poses in a sunlit room"> </div> <div class="post-content"> <p>Just finished my sunrise yoga sequence and feeling completely renewed! This 15-minute flow focuses on gentle stretches that wake up your body and calm your mind. Perfect for those busy mornings when you need a quick energy boost without the caffeine crash later.</p> <p>Try it tomorrow – your body will thank you!</p> </div> <div class="share-text"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 5.12548 15.0077 5.24917 15.0227 5.37061L8.08057 9.19054C7.54878 8.46352 6.7885 8 5.93059 8C4.3128 8 3 9.3431 3 11C3 12.6569 4.3128 14 5.93059 14C6.7885 14 7.54878 13.5365 8.08057 12.8095L15.0227 16.6294C15.0077 16.7508 15 16.8745 15 17C15 18.6569 16.3431 20 18 20C19.6569 20 21 18.6569 21 17C21 15.3431 19.6569 14 18 14C17.1421 14 16.3818 14.4635 15.85 15.1905L8.90789 11.3706C8.92294 11.2492 8.93059 11.1255 8.93059 11C8.93059 10.8745 8.92294 10.7508 8.90789 10.6294L15.85 6.80953C16.3818 7.53648 17.1421 8 18 8Z" fill="#333333"/> </svg> Share this moment </div> <div class="social-share"> <button class="share-button" data-platform="instagram"> <div class="share-icon"> <img src="data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='28' cy='28' r='26' fill='%23FFEBED' stroke='%23FF6F7D' stroke-width='2' stroke-dasharray='4 2'/%3E%3Cpath d='M35 19H21C19.8954 19 19 19.8954 19 21V35C19 36.1046 19.8954 37 21 37H35C36.1046 37 37 36.1046 37 35V21C37 19.8954 36.1046 19 35 19Z' stroke='%23FF6F7D' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='28' cy='28' r='4.5' stroke='%23FF6F7D' stroke-width='2'/%3E%3Ccircle cx='33.5' cy='22.5' r='1.5' fill='%23FF6F7D'/%3E%3C/svg%3E" alt="Instagram"> </div> <span class="share-name">Instagram</span> </button> <button class="share-button" data-platform="pinterest"> <div class="share-icon"> <img src="data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='28' cy='28' r='26' fill='%23FFE8E0' stroke='%23FF6B35' stroke-width='2' stroke-dasharray='4 2'/%3E%3Cpath d='M28 18C22.4772 18 18 22.4772 18 28C18 31.8733 20.2311 35.2307 23.5 36.8879C23.3753 36.0545 23.2653 34.8182 23.5 34C23.7084 33.2729 24.7 29.8215 24.7 29.8215C24.7 29.8215 24.3 29.0215 24.3 27.8215C24.3 25.9215 25.4 24.5215 26.7 24.5215C27.8 24.5215 28.3 25.3215 28.3 26.3215C28.3 27.4215 27.6 29.0215 27.3 30.5215C27 31.8215 28 32.8215 29.3 32.8215C31.6 32.8215 33.4 30.3215 33.4 26.8215C33.4 24.0215 31.4 22.0215 28.1 22.0215C24.3 22.0215 22 24.9215 22 27.9215C22 28.9215 22.3 29.9215 22.8 30.5215C23 30.7215 23 30.8215 23 31.1215C22.9 31.4215 22.7 32.1215 22.7 32.2215C22.6 32.5215 22.4 32.6215 22.1 32.4215C20.5 31.7215 19.5 29.6215 19.5 27.8215C19.5 24.1215 22.6 19.8215 28.4 19.8215C33.1 19.8215 36.6 23.3215 36.6 27.6215C36.6 32.3215 33.7 36.0215 29.6 36.0215C28.3 36.0215 27 35.3215 26.6 34.5215C26.6 34.5215 26 36.8215 25.8 37.4215C25.5 38.5215 24.8 39.7215 24.3 40.4215C25.5 40.8215 26.7 41.0215 28 41.0215C33.5228 41.0215 38 36.5443 38 30.0215C38 23.4986 33.5228 18 28 18Z' fill='%23FF6B35'/%3E%3C/svg%3E" alt="Pinterest"> </div> <span class="share-name">Pinterest</span> </button> <button class="share-button" data-platform="twitter"> <div class="share-icon"> <img src="data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='28' cy='28' r='26' fill='%23E0F3FF' stroke='%2355ACEE' stroke-width='2' stroke-dasharray='4 2'/%3E%3Cpath d='M38 22.0397C37.1014 22.4634 36.1481 22.7537 35.1738 22.8934C36.2015 22.2894 36.9799 21.3398 37.3564 20.2043C36.3913 20.7739 35.3344 21.1724 34.2393 21.3758C33.5519 20.6578 32.6603 20.1696 31.6919 19.976C30.7235 19.7824 29.7196 19.8921 28.8204 20.2908C27.9213 20.6896 27.1693 21.3583 26.6709 22.1989C26.1724 23.0396 25.9534 24.0093 26.0417 24.9762C24.2604 24.8756 22.5186 24.3915 20.9396 23.5574C19.3605 22.7233 17.9834 21.559 16.8985 20.1469C16.4655 20.9028 16.2475 21.7478 16.2477 22.6066C16.2477 24.2959 17.1187 25.789 18.4296 26.6707C17.6402 26.6457 16.8671 26.4355 16.1724 26.0549V26.1159C16.1725 27.0918 16.5022 28.0387 17.1061 28.8082C17.71 29.5777 18.5524 30.1241 19.5083 30.3608C18.7739 30.5557 18.0049 30.5848 17.2584 30.4452C17.5278 31.2776 18.0642 32.0105 18.7914 32.5433C19.5186 33.0761 20.3991 33.3831 21.3054 33.4166C19.8471 34.5525 18.0529 35.1718 16.2104 35.1686C15.8073 35.1687 15.4046 35.1454 15.0049 35.0988C16.8749 36.3123 19.0626 36.9561 21.2959 36.9535C30.2313 36.9535 35.0619 29.6152 35.0619 23.2235C35.0619 23.0134 35.0561 22.8009 35.0457 22.5907C36.0069 21.9025 36.8576 21.0325 37.5566 20.0255L38 22.0397Z' fill='%2355ACEE'/%3E%3C/svg%3E" alt="Twitter"> </div> <span class="share-name">Twitter</span> </button> <button class="share-button" data-platform="facebook"> <div class="share-icon"> <img src="data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='28' cy='28' r='26' fill='%23E4E9F7' stroke='%233B5998' stroke-width='2' stroke-dasharray='4 2'/%3E%3Cpath d='M31 24H33V21C32.5 21 31.5 21 30.5 21C28.5 21 27 22.3 27 24.8V27H24V30H27V39H30V30H32.5L33 27H30V25C30 24.4 30.5 24 31 24Z' fill='%233B5998'/%3E%3C/svg%3E" alt="Facebook"> </div> <span class="share-name">Facebook</span> </button> <button class="share-button" data-platform="email"> <div class="share-icon"> <img src="data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='28' cy='28' r='26' fill='%23F7F2E4' stroke='%23D4A44C' stroke-width='2' stroke-dasharray='4 2'/%3E%3Cpath d='M18 23L27.1716 29.3431C27.702 29.7241 28.398 29.7241 28.9284 29.3431L38 23M20 36H36C37.1046 36 38 35.1046 38 34V22C38 20.8954 37.1046 20 36 20H20C18.8954 20 18 20.8954 18 22V34C18 35.1046 18.8954 36 20 36Z' stroke='%23D4A44C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E" alt="Email"> </div> <span class="share-name">Email</span> </button> </div> </div> </div> <div class="success-message" id="successMessage"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM8 15L3 10L4.41 8.59L8 12.17L15.59 4.58L17 6L8 15Z" fill="#4CAF50"/> </svg> <span id="message-text">Shared to Instagram!</span> </div> <script> document.addEventListener('DOMContentLoaded', function() { const shareButtons = document.querySelectorAll('.share-button'); const successMessage = document.getElementById('successMessage'); const messageText = document.getElementById('message-text'); const splashColors = ['#ffb6c1', '#add8e6', '#90ee90', '#ffffe0', '#e6e6fa']; // Create splash SVGs for animation const createSplash = (x, y, color) => { const splash = document.createElement('div'); splash.classList.add('paint-splash'); splash.style.left = `${x}px`; splash.style.top = `${y}px`; const size = Math.random() * 30 + 20; splash.innerHTML = `<svg width="${size}" height="${size}" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"> <path d="M25 0C35 5 45 15 40 25C35 35 15 45 5 35C-5 25 5 15 15 5C20 0 20 -2 25 0Z" fill="${color}" /> </svg>`; document.body.appendChild(splash); // Animate the splash splash.style.opacity = '0.8'; splash.style.transform = `translate(${Math.random() * 60 - 30}px, ${Math.random() * 60 - 30}px) scale(${Math.random() * 0.5 + 0.5})`; setTimeout(() => { splash.style.opacity = '0'; splash.style.transform = `translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px) scale(0)`; setTimeout(() => splash.remove(), 500); }, 800); }; shareButtons.forEach(button => { const platform = button.getAttribute('data-platform'); button.addEventListener('click', function(e) { // Create paint splashes const rect = this.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; for (let i = 0; i < 5; i++) { setTimeout(() => { const randomColor = splashColors[Math.floor(Math.random() * splashColors.length)]; createSplash(centerX, centerY, randomColor); }, i * 100); } // Show success message messageText.textContent = `Shared to ${platform.charAt(0).toUpperCase() + platform.slice(1)}!`; successMessage.classList.add('show'); setTimeout(() => { successMessage.classList.remove('show'); }, 2000); }); }); // Image hover effect const postImage = document.querySelector('.post-image img'); postImage.addEventListener('mouseover', function() { this.style.transform = 'scale(1.05)'; }); postImage.addEventListener('mouseout', function() { this.style.transform = 'scale(1)'; }); }); </script> </body> </html>
