Header Image I was doing a bit of web browsing today, when I came across the site https://super.me/ I thought some of the effects were a bit noisy (like the heart thing) however I loved their “fun buttons” that made up the footer navigation. So I decided that I wanted to try recreating them.

One of the new things in CSS3, are transforms. There’s a lot of different values for these, but we’re going to focus on scale and rotate.

The scale(sizeX, sizeY) value allows us to completely resize the element. Both making it really big, or really small. It basically multiplies the font-size, width, height, border, padding, margin, etc by this size. I decided to use this to give the buttons a little pop.

The rotate(value) value allows us to rotate the element. You can pass in values in degrees, and it’ll rotate everything.

Using those two combined with a springy transition allows us to completely replicate this effect.

~Codepen