[Eggy]

Ma ktoś może lepszy pomysł od mojego? Potrzebuję uzyskać taki sam efekt(może jakoś sprytniej), tylko w css.

#css #rollover #webdesign #webdev

[npsr]

@Eggy: nie widzę nic złego w podejściu poza zwykłą kosmetyką:
- czemu before, skoro jest nad? After raczej :P
- po co zero na top, left, bottom, right? To jakby przeczy logice :P
- po co 0px? 0 to zero
- zamiast 0.5s możesz po prostu napisać .5s
- brzydkie to :P

A tak poza tym spoko :)

[m.....t]

@Eggy: lel, musisz toggle class na onclick w js zrobić. Dodawana klasa rozszerza after na buttonie, ktory to after ma absolute i jest do lewej. Dodaj transition i gotowe

[m.....t]

@Eggy: niestety nie masz możliwości innych stanów niż focus, które pozostają do wykonania następnej akcji i tylko na inputach(chyba tylko). Także tego, class tylko na js i do boju

[Eggy]

@npsr: Przy pomocy :before animuję szerokość, a :after służy to wklepania tekstu(tak żeby był zawsze na wierzchu[jak wstawię tekst do content w :before to tekst również się animuje, przez text-align: center]), a normalnie(między znacznikami ) tekst jest pod spodem(przykrywa go position: absolute :before). Dzięki za resztę sugestii :P

[Eggy]

@mortt: Wiem że mogę to tak zrobić, ale zależy mi na zrobieniu tego w css a nie js

[m.....l]

@Eggy: chyba troche krocej: http://jsfiddle.net/qs2e3qwu/1/

btw animujac od 0 do 100 pamietaj, ze w ios (nie pamietam czy w androidzie tez tak bylo) hover bedzie traktowany jako dodatkowy click, tzn. jak tapniesz taki guzik to najpierw wykona sie to co na hoverze a dopiero po kolejnym tapie pojdzie href - dlatego dalem 0.01% zamiast 0

[Eggy]

@mjkl: super, dzięki wielkie! Btw zamiast ustawiać szerokość i wysokość na 100% można też użyć wartości inherit