CSS Only bon-bons or Christmas Cracker

Worried about licensing?

Do you have right license for your templates and fonts?

Head over to our partner Envato Elements and unlock unlimited downloads of over 50 million digital assets with full commercial licensing.

  • 50+ Million Assets with Unlimited Downloads
  • Templates, Addons, Fonts, Footage, Photos, Brushes, Presets & More
  • Full Commercial licensing for client work

Get ultimate peace of mind!

Get Started Now
christmas hidden content hover animation pure css
Image: CSS Only bon-bons or Christmas Cracker GIF

Christmas crackers are an integral part of the Christmas celebrations. For the uninitiated it is a cardboard paper tube, wrapped in brightly coloured paper and twisted at both ends that make a snapping sound when pulled opened and often contain a small gift and a joke. This CSS only snippet by Mike Samways helps you add that to your website.

If you are having trouble with the pen, try the archived copy on GitHub

Bon Bons Code Snippet

See the Pen Xmas Cracker CSS3 by Mike Samways (@msamways) on CodePen.default

Posted by:Saijo George

Digital Marketer with a strong focus on technical SEO and design. One of the top 100 makers on Producthunt, co-organizer of the SEO Meetup in Melbourne, an instructor at General Assembly. Worked with brands like Envato, AEON. Currently the SEO Strategy Director at Supple.