blog
Posted On Monday, December 18, 2023
Author: David Armitage (Technical Director)
Guess what? A rubber button I tossed onto CodePen just hit over 11,000 views! Now, let’s unravel the magic behind this bouncy beauty. Buckle up for a journey into accessibility improvements and compatibility tweaks – because who said coding can't be a rollercoaster ride?
Ready for the thrill? Hover or tap the button in your browser to witness the rubbery dance:
Our stage is set with three SVG paths – one for the default, one for the hover, and one for the button's pressed state. They're like the choreography steps of our button ballet. Pro tip: I find it easier to handcraft these paths, like an artist with a paintbrush, rather than wrestling with a design tool.
Our star performer – an actual button element! Applause for native functionality! Plus, an SVG element housing the default shape path. Mark it as 'aria-hidden="true"’ – it’s decorative, not the lead singer. Add ‘preserveAspectRatio="none"’ for a free-spirited stretch to match our button's size. And don't forget the text container for the animated button text.
Time to outfit our button! The stage is set with relative positioning – think of it as our backstage pass for arranging the SVG shape. Set the background to transparent, letting our shape take the spotlight.
Let’s dance with custom properties for synchronized transitions. We're adding a touch of spring with an ease-out-back bezier function. And why not scale elements by 5% for that extra bounce? Duration is set to 0s for the motion-sensitive audience.
Now, let’s add some transitions. A brightness filter on the button will shade or highlight based on viewer proximity – cue the spotlight!
Pushing Boundaries
Remember, use this power responsibly – too much bounciness can steal the show. But when applied with purpose, it turns the mundane into a memorable experience!