KoDemi

Proje Detayları

Bu projede, CSS dönüşümleri ve geçişlerini kullanarak çeşitli interaktif buton efektleri oluşturacaksınız. Bu alıştırma, öğrendiğiniz dönüşüm ve geçiş özelliklerini pratik olarak uygulamanıza yardımcı olacaktır.

Proje Adımları:

Bir HTML dosyası oluşturun ve birkaç buton için temel yapıyı hazırlayın.
Bir CSS dosyası oluşturun ve HTML dosyasına bağlayın.
Butonlar için temel stilleri tanımlayın (boyut, renk, yazı tipi, vb.).
Her buton için farklı bir hover efekti oluşturun:
- İlk buton: Büyüme efekti (transform: scale())
- İkinci buton: Renk değişimi ve gölge efekti
- Üçüncü buton: Döndürme efekti (transform: rotate())
- Dördüncü buton: Taşıma efekti (transform: translateY())
- Beşinci buton: Kombinasyon efekti (birden fazla dönüşüm)
Her buton için uygun geçiş özellikleri ekleyin (transition).
Farklı zamanlama fonksiyonları ve süreler kullanarak çeşitli efektler oluşturun.
Butonlara tıklandığında aktif durumları için de efektler ekleyin (:active seçici).

Başlangıç HTML Kodu:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>İnteraktif Buton Efektleri</title>
    <link rel="stylesheet" href="button-effects.css">
</head>
<body>
    <h1>İnteraktif Buton Efektleri</h1>
    
    <div class="buttons-container">
        <button class="btn btn-scale">Büyüme Efekti</button>
        <button class="btn btn-color">Renk Değişimi</button>
        <button class="btn btn-rotate">Döndürme Efekti</button>
        <button class="btn btn-translate">Taşıma Efekti</button>
        <button class="btn btn-combo">Kombinasyon Efekti</button>
    </div>
</body>
</html>

Bu HTML dosyasını ve boş bir button-effects.css dosyasını oluşturun, ardından CSS dosyasını yukarıdaki adımlara göre doldurun.