Radio buttons and checkboxes are traditionally associated with forms and data, however if you spend some time playing with these elements and CSS you will certainly find a lot more possible and not so boring uses. Here are a few, which will maybe give you ideas and will inspire you.
Star Rating Widget
Fully functional star rating widget, utilizing simple HTML form, hidden radio buttons, adjacent sibling selectors and right-to-left, with hover, selection, persisted state and disabling (a.k.a. already voted).
Animated CSS3 Vertical Accordion
The widget utilizes a simple form with radio buttons, CSS3 animations and adjacent sibling selectors.
Fully functional, multi-level CSS3-only treeview with persisted state, utilizing hidden checkboxes and list elements.
Similar to the treeview from the previous example, but with updated look and feel and added support for nested nodes selection via an additional checkbox.
Feature-complete CSS3-only tabstrip widget, utilizing hidden radio buttons.
iPhone Toggle Buttons
Fully functional iPhone-like toggle buttons, made up of labels, radio buttons or checkboxes.
Animated CSS3-only Slides Viewer
Fully functional presentation slides viewer, utilizing radio buttons, CSS counters and animations with native keyboard arrow support.
Custom Skinnable Radio Buttons and Checkboxes
My favorite approach for styling radio buttons and checkboxes with semantic and minimalistic markup.
Enjoy the weekend!
Related Posts and Links
- Animated HTML5 Windows8 Tiles
- HTML and PHP Clicks, Hits and Downloads Counter System
- Animated CSS3 Notifications Bar
- Ribbon Bar Component
- CSS3 Treeview
- CSS3 Tabstrip
- CSS3 Slides Viewer
- Skinnable CSS3 Metro Form UI
- CSS3 Metro Dropdown Styling
- Autocomplete and Autosuggest Widget
- Table Painter Widget for WYSIWYG Web-based Editors