Stylish Buttons Kit - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stylish Buttons Kit</title>
    <style>
        body {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            background-color: #f4f4f4;
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .button-container {
            margin: 10px;
        }
        .button {
            font-size: 16px;
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            text-align: center;
        }
        .button span {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .button i {
            font-size: 20px;
        }
        .button-1 {
            background-color: #007bff;
            color: #fff;
            box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
        }
        .button-1:hover {
            background-color: #0056b3;
            box-shadow: 0 6px 8px rgba(0, 123, 255, 0.4);
        }
        .button-2 {
            background-color: #28a745;
            color: #fff;
            box-shadow: 0 4px 6px rgba(40, 167, 69, 0.3);
        }
        .button-2:hover {
            background-color: #1e7e34;
            box-shadow: 0 6px 8px rgba(40, 167, 69, 0.4);
        }
        .button-3 {
            background-color: #17a2b8;
            color: #fff;
            box-shadow: 0 4px 6px rgba(23, 162, 184, 0.3);
        }
        .button-3:hover {
            background-color: #117a8b;
            box-shadow: 0 6px 8px rgba(23, 162, 184, 0.4);
        }
        .button-4 {
            background-color: #ffc107;
            color: #212529;
            box-shadow: 0 4px 6px rgba(255, 193, 7, 0.3);
        }
        .button-4:hover {
            background-color: #e0a800;
            box-shadow: 0 6px 8px rgba(255, 193, 7, 0.4);
        }
        .button-5 {
            background-color: #dc3545;
            color: #fff;
            box-shadow: 0 4px 6px rgba(220, 53, 69, 0.3);
        }
        .button-5:hover {
            background-color: #bd2130;
            box-shadow: 0 6px 8px rgba(220, 53, 69, 0.4);
        }
        /* Adding more unique styles */
        .button-6 {
            background: linear-gradient(45deg, #ff6b6b, #f06595);
            color: #fff;
            border-radius: 50px;
            box-shadow: 0 4px 6px rgba(255, 107, 107, 0.3);
        }
        .button-6:hover {
            background: linear-gradient(45deg, #f06595, #ff6b6b);
            box-shadow: 0 6px 8px rgba(255, 107, 107, 0.4);
        }
        .button-7 {
            background: linear-gradient(45deg, #51cf66, #94d82d);
            color: #fff;
            border-radius: 50px;
            box-shadow: 0 4px 6px rgba(81, 207, 102, 0.3);
        }
        .button-7:hover {
            background: linear-gradient(45deg, #94d82d, #51cf66);
            box-shadow: 0 6px 8px rgba(81, 207, 102, 0.4);
        }
        .button-8 {
            background: linear-gradient(45deg, #228be6, #4dabf7);
            color: #fff;
            border-radius: 50px;
            box-shadow: 0 4px 6px rgba(34, 139, 230, 0.3);
        }
        .button-8:hover {
            background: linear-gradient(45deg, #4dabf7, #228be6);
            box-shadow: 0 6px 8px rgba(34, 139, 230, 0.4);
        }
        .button-9 {
            background: linear-gradient(45deg, #ff922b, #f76707);
            color: #fff;
            border-radius: 50px;
            box-shadow: 0 4px 6px rgba(255, 146, 43, 0.3);
        }
        .button-9:hover {
            background: linear-gradient(45deg, #f76707, #ff922b);
            box-shadow: 0 6px 8px rgba(255, 146, 43, 0.4);
        }
        .button-10 {
            background: linear-gradient(45deg, #845ef7, #ae3ec9);
            color: #fff;
            border-radius: 50px;
            box-shadow: 0 4px 6px rgba(132, 94, 247, 0.3);
        }
        .button-10:hover {
            background: linear-gradient(45deg, #ae3ec9, #845ef7);
            box-shadow: 0 6px 8px rgba(132, 94, 247, 0.4);
        }
        .emoji {
            display: none;
            font-size: 20px;
        }
        .button:hover .emoji {
            display: inline;
            animation: emojiBounce 0.5s infinite;
        }
        @keyframes emojiBounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-5px);
            }
        }
        .animated {
            animation: glow 1s infinite alternate;
        }
        @keyframes glow {
            from {
                box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
            }
            to {
                box-shadow: 0 0 20px rgba(255, 255, 255, 1);
            }
        }
    </style>
</head>
<body>
    <div class="button-container">
        <button type="button" class="button button-1">Button 1 <span class="emoji">👍</span></button>
    </div>
    <div class="button-container">
        <button type="button" class="button button-2">Button 2 <span class="emoji">❤️</span></button>
    </div>
    <div class="button-container">
        <button type="button" class="button button-3">Button 3 <span class="emoji">⭐</span></button>
    </div>
    <div class="button-container">
        <button type="button" class="button button-4">Button 4 <span class="emoji">✨</span></button>
    </div>
    <div class="button-container">
        <button type="button" class="button button-5">Button 5 <span class="emoji">🔥</span></button>
    </div>
    <div class="button-container">
        <button type="button" class="button button-6">Button 6 <span class="emoji">🚀</span></button>
    </div>
    <div class="button-container">
        <button type="button" class="button button-7">Button 7 <span class="emoji">🍃</span></button>
    </div>
    <div class="button-container">
        <button type="button" class="button button-8">Button 8 <span class="emoji">🌞</span></button>
    </div>
    <div class="button-container">
        <button type="button" class="button button-9">Button 9 <span class="emoji">🌜</span></button>
    </div>
    <div class="button-container">
        <button type="button" class="button button-10">Button 10 <span class="emoji">😊</span></button>
    </div>
</body>
</html>