Animasyonlu Butonlar

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <div class="button-container">
            <button class="button-glow">Glow Effect</button>
        </div>
        <div class="button-container">
            <button class="button-gradient">Gradient Swipe</button>
        </div>
        <div class="button-container">
            <button class="button-3d">3D Effect</button>
        </div>
        <div class="button-container">
            <button class="button-ripple">Ripple Effect</button>
        </div>
        <div class="button-container">
            <button class="button-outline">Outline Hover</button>
        </div>
        <div class="button-container">
            <button class="button-pulse">Pulse Animation</button>
        </div>
    </body>
</html>

body {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                min-height: 100vh;
                margin: 0;
                background: linear-gradient(120deg, #1a73e8, #34a853);
                font-family: Arial, sans-serif;
                color: #fff;
            }

            .button-container {
                margin: 10px 0;
            }

            button {
                padding: 15px 30px;
                font-size: 18px;
                border: none;
                border-radius: 8px;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            /* Buton 1 - Glow Effect */
            .button-glow {
                background: linear-gradient(45deg, #ff6a00, #ee0979);
                color: white;
                box-shadow: 0 0 20px rgba(255, 106, 0, 0.7);
            }

            .button-glow:hover {
                box-shadow: 0 0 40px rgba(255, 106, 0, 0.9);
                transform: scale(1.1);
            }

            /* Buton 2 - Gradient Swipe */
            .button-gradient {
                background: linear-gradient(45deg, #11998e, #38ef7d);
                color: white;
                position: relative;
                overflow: hidden;
            }

            .button-gradient::before {
                content: "";
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: rgba(255, 255, 255, 0.2);
                transition: left 0.4s ease;
            }

            .button-gradient:hover::before {
                left: 100%;
            }

            /* Buton 3 - 3D Effect */
            .button-3d {
                background: linear-gradient(45deg, #1e3c72, #2a5298);
                color: white;
                box-shadow:
                    0 4px 0 #142850,
                    0 6px 10px rgba(0, 0, 0, 0.3);
            }

            .button-3d:hover {
                transform: translateY(-2px);
                box-shadow:
                    0 6px 0 #142850,
                    0 8px 15px rgba(0, 0, 0, 0.3);
            }

            /* Buton 4 - Ripple Effect */
            .button-ripple {
                background: #ff4b2b;
                color: white;
                position: relative;
                overflow: hidden;
            }

            .button-ripple::after {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                background: rgba(255, 255, 255, 0.2);
                top: 0;
                left: -100%;
                transition: left 0.3s ease;
            }

            .button-ripple:hover::after {
                left: 0;
            }

            /* Buton 5 - Outline Hover */
            .button-outline {
                background: transparent;
                color: white;
                border: 2px solid white;
            }

            .button-outline:hover {
                background: white;
                color: #333;
            }

            /* Buton 6 - Pulse Animation */
            .button-pulse {
                background: linear-gradient(45deg, #ff416c, #ff4b2b);
                color: white;
                position: relative;
            }

            .button-pulse::after {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                border: 4px solid rgba(255, 255, 255, 0.5);
                top: 0;
                left: 0;
                border-radius: 8px;
                opacity: 0;
                animation: pulse 1.5s infinite;
            }

            @keyframes pulse {
                0% {
                    transform: scale(1);
                    opacity: 0.8;
                }
                100% {
                    transform: scale(1.4);
                    opacity: 0;
                }
            }