May 10th: SVG Generative People, CSS Pyramid Tours, and Modern Old School Buttons
Real-time analytics that’s fast, flexible and easy
Ship faster with Rockset. Connect to MongoDB, DynamoDB, MySQL and more. Save your SQL query as a REST endpoint and trigger it from your app. Get results in milliseconds. Try free today.
Rocket Upload Animation
Jon Kantner sends uploads to space with this awesome button with three animated stages: upload start, uploading, and success.
Modern Old School Button
Nils Binder takes it back to the early days of border-radius with these charmingly retro "add to cart" buttons, redone with modern CSS.
If you've ever wondered if CSS can do a kickflip, deren2525 has your answer in this animated Pen.
The Flame Keeps Burning
Animation great Chris Gannon celebrates 9,000 CodePen followers! "Thank you to all the people on here who inspire me - you push me forward to make new things."
The "Animal Kingdom" #CodePenChallenge got off to a soaring start with the week one prompt: birds! Check out our Challenge Collection, including ycw's "parallax bird".
Great Pyramid of Giza - 3D Model - Pure CSS
Josetxu takes us on an interactive 3D tour of the Great Pyramid. Try out the checkbox controls to pause, play, add, and remove details from the model.
Simple CSS Loaders
Sometimes, you just need a good loader! Jenning has you covered with this selection of single-element animated loaders.
Pratham merges two design trends into one with a pair of water drop illustrations. "Neumorphism and glassmorphism design are awesome, but I invented this Dropmorphism UI design"
Checkbox group styled as tiles
"A demonstration of how to create checkboxes that doesn't necessarily looks like... well, checkboxes." From Håvard Brynjulfsen.
Generative SVG paper people
Michelle Barker cuts out a new group of SVG "construction paper" people every time you refresh this Pen.
Laura Grassi shares a Collection of fun pop-culture themed CSS illustrations. Check out the clever details on the League of Legends knife!
Text Selection Fun
Adir shares a set of subtle, satisfying text interactions in CSS.Sponsored:
Jetpack Boost provides one-click optimizations that supercharge your WordPress site
Several of Jetpack's performance-focused features are moving their way over to Jetpack Boost. For example, lazy-loading image (a huge performance win) is now in Jetpack Boost and you can turn it on with the flip of a switch. The most amazing, and brand new, feature of Jetpack Boost is that it does Critical CSS handling for you, which is also a big performance win and very difficult to do by hand.