I used css pseudo elements to create background effects for buttons! First I thought these animations would require keyframes specifying where the element should start and finish… but they could be done using simple pseudo elements and css transitions.
I created pseudo css elements using :before and css transformations. For example to create a slide to right effect, I put a transformation on the pseudo element of scaleX(0). (This shrinks the pseudo element to zero width). On hover, the pseudo element has a transformation of scaleX(1), ‘growing’ to full width. On the before element, I set transition duration, property, and the initial transformation. In order for the transformation to come from the left instead of the middle, I set a transformation origin of top left.
It was fun to think of different transformations to get different effects! Once I got one working, it was much easier to make the various background transitions. The slanted button effect is really just the vertical open effect, but rotated slightly to the right.
I think my favourite is the vertical open because it reminds me of a TV!
Day 57 – Background Transitions