BonBon Buttons - Sweet CSS3 buttons. There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. And voila.. here they are, the BonBon Buttons. Named after the French word for "Candy". So, let's take a tour trough the candy store.
No, wait! Before you click that download button and try to use them on your site, please also read the flaws. Markup I get a real kick out of trying to keep the markup minimal, so I'm really happy with the outcome. You can change the look by adding more classes: <a href="" class="button orange glossy">Label</a> Label Icons Accessibility Addingrole="button" makes it more accessible. Looks I tried to avoid any images but couldn't resist adding a PNG for the noise.
A border-radius doesn't always need to be rounded. For the colors HSL values are used. I tried to simulate different materials. The glossy shape is created using an :after element with a gradient background on top. Flexibility There is one thing I'm kinda sad about. Note. MooTools - a compact javascript framework. Learning MooTools: MooTools Tutorials and Examples. There are literally over a hundred of JavaScript frameworks out there that make writing complex client-side code significantly easier. If you’re in the market for a powerful, relatively lightweight, and customizable JavaScript framework, MooTools is worth checking out.
To help you get on your way to developing highly-interactive web applications using MooTools, here’s 20 tutorials and working examples that’s worth a read. Getting Started with MooTools 1. The "Mootorial" The Mootorial at //clientside is a comprehensive, practical tutorial on the MooTools framework. The tutorial allows you to execute the sample code either by Firebug or the website’s built-in console. 2. Here’s an excellent screencast that introduces the MooTools framework. 3. Beauty By Design provides a nine-part video series on improving user interaction using JavaScript (primarily MooTools). 4. 5.
This tutorial is an entry-level introduction on working with classes in MooTools. Intermediate/Advanced Topics 6. 7. 8. 9. 10. Modernizr. jQuery: The Write Less, Do More, JavaScript Library. CSS3 PIE: CSS3 decorations for IE.