Radio buttons have only recently been open for deep customizations with CSS. The on/off switch design was lifted from Apple’s original iOS and moved onto the web using radios and checkboxes for toggle switches.
1. Accessible Toggles
Accessibility is a huge concern on the web and it’s something you have to consider when restyling an HTML element. These accessible toggles by Chris Hart show just how much you can change with a little CSS.
Each switch has its own unique style including custom animation effects. You can click either side of the switch to toggle the result which is perfect for usability on smaller screens.
Overall these switches are some of the best you can use and they’re really easy to customize. However they do rely on checkboxes so form submissions work a bit differently compared to radio buttons.
2. On/Off CSS Switches
If you like a minimalist approach to design then check out these radios created by Nick Bottomley. They’re as simple as can be and they work flawlessly.
The secondary styles even add custom animation effects to the switch where it expands out like a blob before animating. You can add optional labels that light up when switched on/off and you have plenty of room for adding colors and changing styles.
I’d say these switches make the sturdiest base for customizing on/off buttons without building them from scratch.
3. iOS7 Switches
When Apple released iOS 7 it came with many updates including a flatter design and new on/off switches. These iOS7 switches were recreated using checkboxes and CSS3 by skilled developer Bandar Raffah.
The backgrounds have an interesting animation effect where they slide in & out of view along with the switch button. It’s a really unique approach to the design and the fact that it’s all powered by CSS is even more impressive.
If you’re looking for an Apple-inspired design on your site then these checkbox switches take the cake.
4. Pure CSS Circles
For a slightly more customized solution take a look at these iOS switches by Jesse Couch. The labels are built primarily for Chrome and Firefox so they may not work in all browsers like Opera or Safari.
But they do support the “label” element for radios that can automatically switch between values when clicked. This way the user doesn’t even need to hit the radio, but just the label to get the on/off switch working.
5. Win10 Switches
Windows 10 users will know all about their latest changes for better or worse. The new Win10 settings include many custom on/off switches duplicated in this pen.
You can edit the size, color, and padding all through SCSS variables right in CodePen. These switches all use the HTML checkbox element which makes them superior for mobile users. They don’t have much animation but they look great and work well, two factors that always sell quality interface elements.
6. Clean On/Off Toggle
For accessibility you have to consider how checkboxes handle in older browsers and how attributes like aria-hidden operate. That’s the basis of this pen created by Felipe Fialho.
He takes this on/off switch to the highest level of support with an HTML label and custom styles that degrade gracefully. It’s also a nice looking switch and given the simple setup it works well on any website.
7. Switchboxes
These cleverly designed switchbox inputs were created by Victor Knust as a universally-supported solution. Every switch works in all major browsers including IE7 and above.
Because of this wide browser support you will have to work with JavaScript. It’s not much JavaScript, but it is a factor when deciding if these switches could work on your site.
But they look great and offer universal support which is more than most CSS-based switches.
8. Custom Square Toggles
If you’re really going for custom then check out these square toggles by Andrew Gehman. They completely restyle the checkbox design with square corners, a square switch, and custom text.
I can’t imagine this would blend nicely into many websites. However it shows how far you can go with pure CSS3 and this may be a nice codebase to start with if you wanna customize your own checkboxes.
9. Glowing Switch
An original design by Nick Vasile turned into a fully-functioning glowing CSS switch thanks to developer Valentin Galmand.
This interface almost exactly matches the original Dribbble shot which makes the switch even more impressive. It relies solely on CSS3 to recreate the shadow effects and icons in the center. It’s a shining example of how much you can do with pure CSS.
10. Sliding Radio Buttons
This example may be my favorite because it has such a delectable gradient attached to each button. These sliding radios created by Oguzhan Cansever use CSS3 gradients and custom labels attached to each side of the switch.
However these are pure radio buttons so you can only select one at a time. This means if you click the active side it will not switch over.
But if you like that style then this is more than applicable to any website. You can even customize the gradient colors and increase spacing in the switches all through CSS.
Wrapping Up
You can find dozens of amazing radios in CodePen with free code snippets to copy & edit.
If you like these examples be sure to save your favorites and feel free to browse the “switch” tag for more examples.
You should take a look at these code snippets for creating beautiful CSS buttons next or this collection of copy and paste responsive navigation snippets.
0 comments:
Post a Comment