Efekt przejścia z lewej do prawej jako hover

Question

Witam.
Chciałbym uzyskać taki efekt po najechaniu kursorem na dany przycisk (jako hover):
http://jsfiddle.net/jfriend00/ryjQH/

Mój kod jest następujący:
https://jsfiddle.net/Krzysiek_35/1ect0m02/3/

Próbowałem wielu kombinacji, ale nie przyniosło to zamierzonego efektu. Chciałbym, aby to jasno-zielone tło wraz z czarnymi literami przesuwało się z lewej do prawej w obszarze przycisku (width: 180px) po najechaniu kursorem na ten dany przycisk.
Podobno stosuje się do tego celu: transition-duration: 4s (czas trwania efektu przejścia, np. 4 sekundy) oraz transition-timing-function: linear (tempo efektu przejścia jako stałe).

Czy da się uzyskać taki efekt po najechaniu kursorem?

Będę bardzo wdzięczny za pomoc.

Answer 1

Witam. Zobacz jak to jest zrobione tu

Comments

Przydatne są tam przykłady, ale czy jeden z nich zadziała w praktyce...

---

Nie rozumiem. 

Chciałbym, aby to jasno-zielone tło wraz z czarnymi literami przesuwało się z lewej do prawej w obszarze przycisku (width: 180px) po najechaniu kursorem na ten dany przycisk. 

ten efekt to Sweep To Right  lub bardziej efektowny Bounce To Right w efektach Background Transitions. 

---

Zastosowanie w twoim przykładzie

hvr-bounce-to-right

---

Wiem, że ten efekt to Sweep to Right. Pozmieniam kod i przetestuję ten efekt. Dzięki za te przykłady.