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.