Efekt przejścia z lewej do prawej jako hover

pytanie zadane 15 czerwca 2017 w HTML i CSS przez Krzysiek_34 Mądrala (6,230 p.)
zamknięte 15 czerwca 2017 przez Krzysiek_34

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.

komentarz zamknięcia: Niepotrzebnie zakładałem ten temat!

1 odpowiedź

odpowiedź 15 czerwca 2017 przez pablop76 VIP (123,340 p.)

Witam. Zobacz jak to jest zrobione tu

komentarz 15 czerwca 2017 przez Krzysiek_34 Mądrala (6,230 p.)

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

komentarz 15 czerwca 2017 przez pablop76 VIP (123,340 p.)

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.