I posted a shot a few days ago on dribbble (https://dribbble.com/shots/1908149-CSS-only-toggle-no-js) and had some questions on how it was accomplished using only CSS. I whipped up a quick blog post / codepen to show how I set it up. Hopefully this is helpful to some!
I like that bounce!
I made a similar thing a few years ago. It was mainly an attempt to play with Sass mixins, but I also needed it at the time. It can take any text and it's easy to make it whatever size you want.
I just gave it a quick update to remove the Compass dependency since we have autoprefixer these days.
Nice. The pen has some syntax errors btw (extra closing parens), but nice solution!
And thanks for catching that. Looks like extra closing parens were the result of my hasty removal of Compass earlier.
I gave it a try with a single input element (because semantics or whatever) and its pretty functional: codepen (sans the animations)
Haha yeah, definitely possible to clean up the HTML a bit. I left it rather expanded to adhere to our internal styleguide. Nice though!
Looks like a fun thing to create. You might as well change those icons to SVG if you're going this modern with your CSS :)
[offtopic]your site looks a bit odd in FF35.0.1
For some reason FF didnt like the
font-variant: small-capswhich I had enabled. I disabled it for now, seems like a bug.
Looks good now!