Site Adresi : forum.divxskosesi.com

MyBB Sürümü : 1.8.5
Kurulu Eklentiler :

1. Anahtar Kelimeler Eklentisi (v1)
   
2. Forum Yaşı by HSC Community (1.0)
   
3. Gizli İçerik Plugin (1.0)
   
4. Google SEO (1.6.8)
   
5. Highslide Resim Görüntüleme (5.0)
   
6. Bildirim Eklentisi (2.0.2)
   
7. MyTabs (1.32)
   
8. NewPoints Plugin (2.0)
   
9. OUGC Ödül Sistemi (1.8.3)
   
10. OUGC Her Foruma Özel Logo Eklentisi (1.8.1)
    
11. Portal Duyurularında Mesaj Sınırlama. (1.0)
    
12. ProStats /Profesyonel İstatistikler/ (1.9.6)
    
13. Ziyaretçilere Link Gizleme (1.0)
    
14. Benzer Konular (1.0.0)
    
15. MyBB Etiket Plugin (1.0)
    
16. Thanks (3.9.2)
    
17. Destek Bildirim Sistemi (1.0.1)
    
18. Görev Listesi (1.0.2)
    
19. Silinen Konuları Çöpe Atma (2.0)
    
20. Kullanıcı Etiketleme (1.2.1)
    
21. Yeni Üyeye Konu (1.0)
    

Sorun açıklaması : Hover efektini yapamadım yardımcı olur musunuz   Buradaki   gibi yapmak istiyorum
Hata Ekran Görüntüsü : 

Bu şekilde yapabildim olmuyor ya

Direk css dosyanın sonuna ekle. Yapamamış olmanın sebebi de şudur codepen de sass olarak yazılmış sağ üstten view compiled kısmına tıklarsan compile edilmiş css kodlarını görürsün oradan alıp kullanabilirsin.

Kod:

@-webkit-keyframes sheen {
 0% {
   -webkit-transform: skewY(-45deg) translateX(0);
           transform: skewY(-45deg) translateX(0);
 }
 100% {
   -webkit-transform: skewY(-45deg) translateX(12.5em);
           transform: skewY(-45deg) translateX(12.5em);
 }
}
@keyframes sheen {
 0% {
   -webkit-transform: skewY(-45deg) translateX(0);
           transform: skewY(-45deg) translateX(0);
 }
 100% {
   -webkit-transform: skewY(-45deg) translateX(12.5em);
           transform: skewY(-45deg) translateX(12.5em);
 }
}

.tabbutton {
 padding: 0.75em 2em;
 text-align: center;
 text-decoration: none;
 color: #2194E0;
 border: 2px solid #2194E0;
 font-size: 24px;
 display: inline-block;
 border-radius: 0.3em;
 -webkit-transition: all 0.2s ease-in-out;
         transition: all 0.2s ease-in-out;
 position: relative;
 overflow: hidden;
}
.tabbutton:before {
 content: "";
 background-color: rgba(255, 255, 255, 0.5);
 height: 100%;
 width: 3em;
 display: block;
 position: absolute;
 top: 0;
 left: -4.5em;
 -webkit-transform: skewX(-45deg) translateX(0);
     -ms-transform: skewX(-45deg) translateX(0);
         transform: skewX(-45deg) translateX(0);
 -webkit-transition: none;
         transition: none;
}
.tabbutton:hover {
 background-color: #2194E0;
 color: #fff;
 border-bottom: 4px solid #1977b5;
}
.tabbutton:hover:before {
 -webkit-transform: skewX(-45deg) translateX(13.5em);
     -ms-transform: skewX(-45deg) translateX(13.5em);
         transform: skewX(-45deg) translateX(13.5em);
 -webkit-transition: all 0.5s ease-in-out;
         transition: all 0.5s ease-in-out;
}

(24-08-2015, Saat:13:40)TShujin Adlı Kullanıcıdan Alıntı: Direk css dosyanın sonuna ekle. Yapamamış olmanın sebebi de şudur codepen de sass olarak yazılmış sağ üstten view compiled kısmına tıklarsan compile edilmiş css kodlarını görürsün oradan alıp kullanabilirsin.

Kod:

@-webkit-keyframes sheen {
 0% {
   -webkit-transform: skewY(-45deg) translateX(0);
           transform: skewY(-45deg) translateX(0);
 }
 100% {
   -webkit-transform: skewY(-45deg) translateX(12.5em);
           transform: skewY(-45deg) translateX(12.5em);
 }
}
@keyframes sheen {
 0% {
   -webkit-transform: skewY(-45deg) translateX(0);
           transform: skewY(-45deg) translateX(0);
 }
 100% {
   -webkit-transform: skewY(-45deg) translateX(12.5em);
           transform: skewY(-45deg) translateX(12.5em);
 }
}

.tabbutton {
 padding: 0.75em 2em;
 text-align: center;
 text-decoration: none;
 color: #2194E0;
 border: 2px solid #2194E0;
 font-size: 24px;
 display: inline-block;
 border-radius: 0.3em;
 -webkit-transition: all 0.2s ease-in-out;
         transition: all 0.2s ease-in-out;
 position: relative;
 overflow: hidden;
}
.tabbutton:before {
 content: "";
 background-color: rgba(255, 255, 255, 0.5);
 height: 100%;
 width: 3em;
 display: block;
 position: absolute;
 top: 0;
 left: -4.5em;
 -webkit-transform: skewX(-45deg) translateX(0);
     -ms-transform: skewX(-45deg) translateX(0);
         transform: skewX(-45deg) translateX(0);
 -webkit-transition: none;
         transition: none;
}
.tabbutton:hover {
 background-color: #2194E0;
 color: #fff;
 border-bottom: 4px solid #1977b5;
}
.tabbutton:hover:before {
 -webkit-transform: skewX(-45deg) translateX(13.5em);
     -ms-transform: skewX(-45deg) translateX(13.5em);
         transform: skewX(-45deg) translateX(13.5em);
 -webkit-transition: all 0.5s ease-in-out;
         transition: all 0.5s ease-in-out;
}

Teşekkürler hocam bir tek şu sıkıntı var . Efekt sol yukarıdan sağ aşağı iniyor oraya kadar tamam ama sağ aşağıda kalıyor sadece müzik te yok oluyor o neden oluyor acaba ?

Butonların uzunlukları farklı olduğu için öyle oluyor. Butonların uzunluklarını sabitlersen ve hover kısmını onagöre ayarlarsan sorunun çözülür. Yada şunu deneyebilirsin;

Kod:

.tabbutton:hover::before {
   transition: all 0.8s ease-in-out 0s;
   transform: skewX(-45deg) translateX(750%);
}

(24-08-2015, Saat:14:06)TShujin Adlı Kullanıcıdan Alıntı: Butonların uzunlukları farklı olduğu için öyle oluyor. Butonların uzunluklarını sabitlersen ve hover kısmını onagöre ayarlarsan sorunun çözülür. Yada şunu deneyebilirsin;

Kod:

.tabbutton:hover::before {
   transition: all 0.8s ease-in-out 0s;
   transform: skewX(-45deg) translateX(750%);
}

Teşekkürler hocam elinize bilginize sağlık konu kilitlenebilir ...