Web siteniz veya blogunuz için dikkat çekici bir indirme butonu mu arıyorsunuz? Klasik butonlardan sıkıldıysanız, hareketli ve modern bir tasarıma sahip bulut animasyonlu indirme butonunu deneyebilirsiniz! Bu buton, kullanıcıların ilgisini çekecek ve sitenize profesyonel bir hava katacaktır.

Bulut Animasyonlu İndirme Butonu Nedir?

Bu özel indirme butonu, sayfanın ortasında yer alarak kullanıcıları harekete geçirmeye teşvik eder. Üzerine gelindiğinde hafifçe büyüyerek etkileşim sağlar. Ayrıca bulut efekti ile yukarı-aşağı hareket ederek daha dinamik bir görünüm sunar.

Özellikleri:

✅ Merkezde Konumlandırılmış: Sayfanın tam ortasında yer alır ve dikkat çeker. ✅ Hareketli Bulut Efekti: Buton, sürekli olarak yukarı ve aşağı hareket eden bir bulut animasyonu ile süslenmiştir. ✅ Şık ve Modern Görünüm: Yuvarlak hatlara sahip ve gölge efektleri ile daha gerçekçi bir his verir. ✅ Tüm Cihazlarla Uyumlu: Mobil ve masaüstü cihazlarda sorunsuz çalışır.

Nasıl Kullanılır?

Bu harika butonu kendi sitenize eklemek için aşağıdaki kodu kullanabilirsiniz. Tek yapmanız gereken, Blogger yazı düzenleyicisinde "HTML" sekmesine geçerek kodu yazınızın istediğiniz yapıştırmaktır.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @keyframes cloudMovement {
            0% { transform: translateX(-50%) translateY(0); }
            50% { transform: translateX(-50%) translateY(-10px); }
            100% { transform: translateX(-50%) translateY(0); }
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f9;
            text-align: center;
        }

        .cloud-btn {
            position: relative;
            display: inline-block;
            padding: 20px 40px;
            font-size: 18px;
            font-weight: bold;
            color: white;
            background-color: #4CAF50;
            border-radius: 50px;
            text-decoration: none;
            text-align: center;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            animation: cloudMovement 2s infinite;
            transition: transform 0.3s ease, background-color 0.3s ease;
        }

        .cloud-btn:hover {
            transform: scale(1.1);
            background-color: #45a049;
        }

        .cloud {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 120px;
            height: 50px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            animation: cloudMovement 2s infinite;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <a href="LİNKİNİZİ BURAYA YAPIŞTIRIN" class="cloud-btn" target="_blank">
        <div class="cloud"></div>
        <span>İndir</span>
    </a>
<!-- oluşturan: https://veysgezegen.blogspot.com/ -->
</body>
</html>

Neden Kullanmalısınız?

🚀 Görsel Çekicilik: Sitenize modern ve eğlenceli bir dokunuş katar. 📱 Mobil Uyumlu: Buton, tüm cihazlarla uyumlu çalışır. 🎯 Kullanıcı Etkileşimi: Ziyaretçilerinizin dikkatini çeker ve etkileşimi artırır.

Bu özel buton ile web sitenizi daha etkileyici hale getirebilir ve kullanıcılarınıza hoş bir deneyim sunabilirsiniz. Deneyin ve farkı görün! LİNKİNİZİ BURAYA YAPIŞTIRIN yerini silip linkinizi ekleyin ve kullanın.