Tab Menü Hover Efekti

(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;
}