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

Animasyonlu Buton

Üzerine gelindiğinde çapraz bir ışık süpürmesi geçen ve hafifçe büyüyen gradyan bir eylem butonu. Saf CSS, JavaScript yok.

Admin
20 Nisan 2026
277 görüntülenme
Tam Ekran
HTML 
<html>
    <head>
        <title>Animated bg Button</title>
    </head>
    <body>
        <div class="button-container">
            <button class="animated-button">Hadi Başlayalım</button>
        </div>
    </body>
</html>
CSS 
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    font-family: Arial, sans-serif;
}

.button-container {
    text-align: center;
}

.animated-button {
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background: linear-gradient(45deg, #ff416c, #ff4b2b);
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.animated-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    transform: skewX(-45deg);
    transition: left 0.5s ease;
}

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

.animated-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

Bu snippet hakkında

Bu snippet sıradan bir <button> öğesini dikkat çeken bir eylem butonuna dönüştürür. Buton pembe-turuncu bir gradyan üzerinde durur; imleç üzerine geldiğinde yüzeyden yarı saydam bir ışık şeridi kayarak geçer, buton hafifçe büyür ve gölgesi derinleşir.

Nasıl çalışır?

  • Işık şeridi bir ::before sözde öğesidir; skewX(-45deg) ile eğilir ve başlangıçta left: -100% ile butonun dışında bekler.
  • Butondaki overflow: hidden şeridi kırpar; böylece şerit yalnızca buton üzerinden geçerken görünür.
  • :hover durumunda şerit left: 100% konumuna taşınır; left üzerindeki transition bu sıçramayı 0,5 saniyelik bir süpürmeye çevirir.
  • Aynı hover durumu transform: scale(1.1) ve daha büyük bir box-shadow uygulayarak butonu öne çıkarır.

Nasıl kullanılır?

  1. HTML ve CSS kodlarını sayfana kopyala; body kuralları yalnızca örneği ortalar, istersen silebilirsin.
  2. Efekti istediğin buton ya da bağlantıya animated-button sınıfını ekle.
  3. linear-gradient(45deg, #ff416c, #ff4b2b) içindeki iki rengi markana göre değiştir.
  4. Süpürme hızını ::before geçişindeki 0.5s değeriyle ayarla.

İpuçları

Ölçek değerini 1,03 ile 1,1 arasında tut; böylece butonun çevresindeki yerleşim kaymaz. Klavye kullanıcıları için aynı stilleri :focus-visible durumuna da ekle; efekt Tab tuşuyla butona gelindiğinde de görünsün.

Yorumlar 0

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