CodePen Challenge #1: CSS Jiggly Button

So this is a series we’ve been wanting to do for a while. It’s always good to experiment with some CSS/JS techniques that are either new to us or we haven’t used in a while. Flexing and stretching our web developer muscles is best done by building cool things!

This is a code challenge. Basically, we post a cool CodePen and if you feel up to the task, you start up a CodePen and try to recreate the effect yourself!

Try to do it without peeking at the source for the CodePen challenge, but if you need a nudge in the right direction, definitely take a peek under the hood. Don’t feel discouraged if some of these challenges are a little difficult, working through projects that we don’t know at first, lead us to become better developers.

So without further ado, here’s the challenge! We’ll start off with a simple CSS animation challenge.

The Challenge

Here’s the CodePen by Tiffany Rayside (Follow her on CodePen and Twitter):

Press RERUN in the CodePen if you don’t see the CSS animation.

See the Pen Jiggle by Tiffany Rayside (@tmrDevelops) on CodePen.

To get you started, here’s some HTML:


<a href="#" class="button">Jiggle</a>

And the CSS is all yours to figure out!

Good luck and post your CodePens in the comments so we can see your creations! If you want us to, we can also post a walkthrough of how to create this effect.

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.