Creating an Interactive Emoji Float Button in HTML

This code snippet demonstrates how to create a simple web page with an interactive emoji float button. It utilizes HTML for structure and CSS for styling, including hover effects and animations to make the button visually engaging. Perfect for enhancing user interaction on web applications!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emoji Float Button</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #startButton {
            padding: 15px 30px;
            font-size: 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        #startButton:hover {
            background-color: #45a049;
        }
        .emoji {
            position: absolute;
            font-size: 30px;
            animation: float 5s ease-in-out infinite;
        }
        @keyframes float {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-100px);
            }
            100% {
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>

<button id="startButton">Start</button>

<script>
    document.getElementById('startButton').addEventListener('click', function() {
        const emojis = ['😊', '😂', '😍', '🤩', '😎', '🥳', '😜'];
        const emojiCount = 10;
        
        for (let i = 0; i < emojiCount; i++) {
            const emoji = document.createElement('div');
            emoji.classList.add('emoji');
            emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
            emoji.style.left = `${Math.random() * 100}%`;
            emoji.style.animationDuration = `${Math.random() * 3 + 2}s`;

            document.body.appendChild(emoji);

            setTimeout(() => {
                emoji.remove();
            }, 5000); // Remove emoji after animation ends
        }
    });
</script>

</body>
</html>

Editor is loading...