HTML ve CSS ile Mouse Hover Efekti Buton Animasyonu

Hareketli butonlar insanların ilgisini çekebilir. Fare imleci ile üzerine gelindiğinde ilgi çekici bir animasyon, hover efekti yapacağız.

İki sayfamız olacak yine. index.html ve style.css. Hemen index.html’e gelip temel HTML kodlarını yazalım ve style.css’i de buraya bağlayalım. İki farklı örnek göstereceğim. Dolayısıyla sayfa üzerinde iki buton olacak. Bunların tamamını kapsayan bir div oluşturalım ve bu div etiketinin içerisine bir buton etiketi ekleyelim. Bu buton etiketi içerisine btn ve btn1 class’ı tanımlayalım. Bir metin yazalım. Sepete Ekle diyorum ve bu satırın bir kopyasını oluşturuyorum. btn1’i btn2 olarak değiştiriyorum ve buna da Abone Ol diyelim.

index.html dosyasına temel buton kodlarımızı yazalım.


<div class="button">
    <button class="btn btn1">Sepete Ekle</button>
    <button class="btn btn2">Abone Ol</button>
</div>

Butonlarımızı oluşturduk. index.html ile işimiz bitti. index.html dosyasında iki adet butonumuz var. Şimdi style.css‘e geçelim. Öncelikle sayfanın genel görünümü üzerinde bir düzenleme yapalım. Bu butonları sayfanın ortasına alalım ve buton içerisindeki metinleri de butonlara ortalayalım.


.button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.btn {
    background: none;
    border: 2px solid #2c3e50;
    font-size: 14px;
    font-family: "Tahoma", sans-serif;
    text-transform: uppercase;
    padding: 12px 20px;
    min-width: 200px;
    margin: 10px;
    cursor: pointer;
    position: relative;
    transition: color 0.4s linear;
}

.btn:hover {
    color: #FFF;
}

.btn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #2c3e50;
    z-index: -1;
    transition: transform 0.5s;
    transform-origin: 0 0;
    transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
}

.btn1::before {
    transform: scaleX(0);
}

.btn1:hover::before {
    transform: scaleX(1);
}

.btn2::before {
    transform: scaleY(0);
}

.btn2:hover::before {
    transform: scaleY(1);
}

Bu videoda butonlara animasyon vermenin farklı bir yöntemini, farklı bir çeşidini gösterdim.

Popular Eğitimler

CSS Sprite Nasıl Yapılır?

İnternet standartlarının ve CSS’in gelişmesi, sağladığı kolaylıklar, programcılara özellikle hız ve düzen…

Prism JS Syntax Highlighter WordPress Kurulumu ve Kullanımı

Prism JS, syntax highlighter olarak tanımlanan bir script. Kod parçacıklarını göze hoş…

Portfolyo Sayfaları için JavaScript TypeWriter Efekti

Daha çok portfolyo veya ajans sitelerinde gördüğümüz tarzda bir daktilo yazım efekti…

CSS ile Hareketli Renkli Gradient Arka Plan

CSS ile sayfalarınıza renk katacak birçok şey yapabiliyorsunuz. Hareketli bir şekilde arka…

Görsel Optimizasyon ile Daha Hızlı Web Sayfaları

Resimleri optimize ederek sitenizin daha hızlı ve verimli kullanımını sağlayabilirsiniz. Bunun için…

HTML ve CSS ile Tam Ekran Video Arka Plan

Tam ekran arka planları, web tasarım dünyasında son zamanlarda çok popüler hale…