Louis Bullock

Coconut UI Css

  • Save
Coconut UI Css ui button slider bubble switch toggle dropdown hover menu text field input psd coconut css code html css3 web web design

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.


keyboard shortcuts: L or F like