CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol
Animasyon

Animasyonlu Gradient Buton

Dört renkli gradyan arka planı sürekli akan, üzerine gelince hafif bir parıltı kazanan kare buton. Saf CSS keyframe animasyonu.

Admin
20 Nisan 2026
256 görüntülenme
İçeriğe Git Tam Ekran
HTML 
<html>
    <head>
        <title>Animated bg Button</title>
    </head>
    <body>
        <button class="animated-bg">CODE BLANKS</button>
    </body>
</html>
CSS 
body {
    display: flex;
    justify-content: center;
    align-items: center;
}
.animated-bg {
    width: 200px;
    height: 200px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    position: fixed;
    color: #d3d3d3;
    font-size: 20px;
    border: 1px solid;
    border-radius: 5px;
    cursor: pointer;
    padding: 10px;
    background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}
.animated-bg:hover {
    color: white;
    box-shadow: 0px 2px 7px 0px #00b0ff96;
}
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

Bu snippet hakkında

Tek bir sınıfla canlı bir arka plan: buton mercan, pembe, mavi ve turkuaz renklerden oluşan dört duraklı bir gradyanla dolar ve bu renkler yavaşça bir uçtan diğerine akıp geri döner. Üzerine gelindiğinde yazı beyazlaşır ve kenarlarda serin mavi bir parıltı belirir.

Nasıl çalışır?

  • Arka plan dört renkli bir linear-gradient(45deg, …) ifadesidir; background-size: 400% 400% ile büyütüldüğü için aynı anda yalnızca bir kısmı görünür.
  • gradientBG keyframe'leri background-position değerini 0% 50% ile 100% 50% arasında gidip getirir; renklerin akıyormuş gibi görünmesini sağlayan budur.
  • animation: gradientBG 15s ease infinite döngüyü sakin bir hızda sonsuza kadar sürdürür.
  • Hover durumu yalnızca yazı rengini değiştirir ve bir box-shadow ekler; animasyonu hiç kesmez.

Nasıl kullanılır?

  1. .animated-bg kuralını ve @keyframes gradientBG bloğunu kopyala.
  2. Normal satır içi bir buton istiyorsan position: fixed ile sabit width/height değerlerini kaldır.
  3. Dört rengi kendi paletinle değiştir; üç ila beş renk en akıcı sonucu verir.
  4. Daha hareketli bir efekt için 15s süresini kısalt, daha sakin bir görünüm için uzat.

İpuçları

Aynı teknik hero alanlarında, kartlarda ve rozetlerde de işe yarar. Daha az hareket tercih eden ziyaretçilere saygı için animasyonu @media (prefers-reduced-motion: no-preference) içine al.

Yorumlar 0

Henüz yorum yok. İlk yorumu sen yaz.