Icônes sociales

Ouvrir dans l'éditeur Publiez votre code

Recommandé

23 July 2024

Connexion et inscription animées

8 February 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Icons</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Social Icons</h1>
    <button class="toggle-button" id="toggle-mode">
        <i class="fas fa-moon"></i>
    </button>

<div class="info-card" id="info-card">
        <h3>Social Media</h3>
        <p>Select a platform to connect with us!</p>
    </div>

<div class="footer">
        <p>Created by <a href="#">Anes</a></p>
    </div>

CSS

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #0a1d3d, #0e2a57);
    color: #e0e0e0;
    transition: background 0.5s ease, color 0.5s ease;
}

.light-mode {
    background: linear-gradient(135deg, #2a2e3b, #3b3f4f);
    color: #ddd;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    letter-spacing: 1px;
    transition: color 0.3s;
}

.toggle-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.3s;
}

.toggle-button:hover {
    transform: scale(1.2);
}

.social-icons {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

.icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-decoration: none;
    font-size: 35px;
    transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.icon:hover {
    transform: scale(1.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.icon::before {
    content: '';
    position: absolute;
    width: 300%;
    height: 300%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: transform 0.3s;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
}

.icon:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

.icon i {
    position: relative;
    z-index: 1;
    transition: color 0.3s, transform 0.3s;
}

.icon.facebook { color: #3b5998; }
.icon.twitter { color: #1da1f2; }
.icon.instagram { color: #e1306c; }
.icon.linkedin { color: #0077b5; }
.icon.pinterest { color: #bd081c; }
.icon.snapchat { color: #fffc00; }
.icon.tiktok { color: #69c9d0; }
.icon.reddit { color: #ff4500; }
.icon.youtube { color: #ff0000; }
.icon.whatsapp { color: #25d366; }
.icon.discord { color: #7289da; }

.info-card {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    width: 220px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 10;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.icon:hover ~ .info-card {
    opacity: 1;
}

h3 {
    margin: 0;
    font-size: 1.5em;
}

p {
    margin: 5px 0 0;
    font-size: 1em;
}

.footer {
    position: absolute;
    bottom: 20px;
    text-align: center;
    width: 100%;
    font-size: 0.8em;
}

.footer a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.footer a:hover {
    color: #1da1f2;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    opacity: 0.2;
    background: rgba(255, 255, 255, 0.2);
    animation: float 6s infinite;
}

@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

.bubble:nth-child(1) { width: 100px; height: 100px; left: 20%; top: 50%; }
.bubble:nth-child(2) { width: 120px; height: 120px; left: 60%; top: 70%; animation-duration: 8s; }
.bubble:nth-child(3) { width: 80px; height: 80px; left: 80%; top: 30%; animation-duration: 5s; }
.bubble:nth-child(4) { width: 150px; height: 150px; left: 40%; top: 20%; animation-duration: 10s; }

JS

const toggleButton = document.getElementById('toggle-mode');
const body = document.body;

toggleButton.addEventListener('click', () => {
    body.classList.toggle('light-mode');
    toggleButton.innerHTML = body.classList.contains('light-mode') ? 
        '<i class="fas fa-sun"></i>' : '<i class="fas fa-moon"></i>';
});

document.querySelectorAll('.icon').forEach(icon => {
    icon.addEventListener('mouseover', function() {
        const platform = this.classList[1];
        let platformName;

switch(platform) {
            case 'facebook':
                platformName = 'Facebook: Connect with friends and the world.';
                break;
            case 'twitter':
                platformName = 'Twitter: Join the conversation.';
                break;
            case 'instagram':
                platformName = 'Instagram: Share your moments.';
                break;
            case 'linkedin':
                platformName = 'LinkedIn: Connect professionally.';
                break;
            case 'pinterest':
                platformName = 'Pinterest: Discover and save creative ideas.';
                break;
            case 'snapchat':
                platformName = 'Snapchat: Share your snaps with friends.';
                break;
            case 'tiktok':
                platformName = 'TikTok: Create and share short videos.';
                break;
            case 'reddit':
                platformName = 'Reddit: Dive into anything.';
                break;
            case 'youtube':
                platformName = 'YouTube: Watch and share videos.';
                break;
            case 'whatsapp':
                platformName = 'WhatsApp: Chat with friends and family.';
                break;
            case 'discord':
                platformName = 'Discord: Chat and meet with communities.';
                break;
        }

document.getElementById('info-card').innerHTML = `<h3>${platform.charAt(0).toUpperCase() + platform.slice(1)}</h3><p>${platformName}</p>`;
    });
});

Icônes sociales

Recommandé

Connexion et inscription animées

lumière changeante

Un code par bhviet1510

HTML

CSS

JS

Recommandé

Connexion et inscription animées

lumière changeante

Un code par bhviet1510

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS