CSS Only bon-bons or Christmas Cracker

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.