👉 Last chance! We’ve opened up more tickets to our workshops with Dan Cederholm & Aaron Draplin! Get tickets now. 👈
Here's Robert van Klinken's Coconut UI in CSS (with some base64 encoded images). I couldn't achieve the two colours on both sides of the range slider, nor the blocky tick, and not even the curved tail of the chat bubble, not to mention I didn't have Proxima Nova handy.
Overall though, I'm really happy with the result, and I've definitely learnt some new things about styling form elements, and how wonderful it is!
Thankfully @Joshua Hibbert helped me out with animating the switches, and the button hovers, such a great bloke!
Note: This works beautifully in WebKit browsers, mainly Chrome, but if you want to support it in other browsers, be my guest, grab the code, clean it up, prefix it etc, you're free to do what you want!
→ Grab the code! ←
EDIT: Oops! Spelt Frappuccino wrong! You get the idea, anyway.