Css Hover Kullanımı ve Hover Effects, Hover Animation, Hover Button

Yazar: Master Web Tasarım Yayın Tarihi: 23/01/2022 12:12

Css hover kullanımı, hover button, hover animation ve hover effects hakkında bilgiye bu yazımızda değineceğiz. Aslında çok kolay bir kullanıma sahip şekilde kodlar uygulanmaktadır. Bilindiği gibi css dosyaları frontend (son kullanıcının gördüğü sitenin ön yüzü) kısımlarda kullanılmaktadır. Css kodları ile siz de çok kaliteli web tasarım projeleri geliştirebilirsiniz. Web tasarımı ve web yazılımı konusunda css bizlere oldukça güzel imkanlar sunmakta. Css nedir diyorsanız buraya tıklayarak css hakkında detaylı bilgi edinebilirsiniz.

Css Hover Effect Kullanımı

Css hover effect kullanımı aslında çok basit bir şekilde uygulanmaktadır. Css kullanımı 2 şekilde yapılabilir.

1- Sayfa içi css (style) kodları

2- .css uzantılı css dosyası

Biz şimdilik 1. örnek ile devam edeceğiz. Örneğin bir buton üzerine gelindiğinde arka plan renginin değişmesini istersek .classismi:hover şeklinde bir kullanım yapmaktayız. Örnek kullanım aşağıda ki gibidir.

 <!DOCTYPE html>
 <html>
 <head>
     <title>CSS NEDİR?</title>
 <style type="text/css">
     .classismi{
         background: red
     }
     .classismi:hover{
         background: blue
     }
 </style>
 </head>
 <body>
 
 <button class="classismi">TEST BUTON</button>
 
 </body>
 </html>