Day 57 – Button Effects

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!

buttons

Day 57 – Background Transitions

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s