90+ Pure CSS Radio Buttons (Open Source Examples)

As you select different options, watch the dot worm hop from the previous to the current! Concept based on this Dribbble shot. Update 1/24/20: iOS Safari-related fix

Interaction with radio buttons made to look like Chinese checkers on a wooden board

Another overly elaborate radio animation

Heres an interaction which allows you to change your card theme. We focused on the two simple micro animations which indicate the accomplishment of changing your card – which is quite a joyful moment for most users. This Pen is a recreation of a Dribbble Shot, which can be viewed here: ht...

Read More

Mobile Radio Buttons as real buttons, simple look and feel with a small animation. Easy to use and to handle.

Animated SVG radio buttons using CSS.

The radio button highlight travels underground Inspired by this pen: https://dribbble.com/shots/4214518-Radio-button

A range-click slider with a sliding dot indicator, labels, validity-conditional styling, and NO JS. Works 100% on JS-restricted sites.

A toggle switch to use in your forms (using radio inputs as the core) that is responsive. Styled with CSS, using Flexbox for sizing.

It's been decades — checkboxes and radio buttons still look terrible and don't play well without some love. Starting with well-formed HTML, look what we can do with a bit of style and some Font Awesome glyphs...

CSS tricks: use flex-grow for transition. inspired from Alignment button Pair programming with RulinShyu & yuanyu, @ Happy CSSer - 27 by VS Code Live Share

I wanted to style a toggle with CSS by using the :checked~(classname) state. Inspired by: https://dribbble.com/shots/2619401-Smiler

Pen built using just CSS and SVG's, no JS needed.

Sticky Radio Button Enjoy this flat and simple styling of radio button in only vanilla CSS :)

Ripple animation on input type radio and Checkbox . more info https://goo.gl/VoFJrw

A simple and elegant CSS radio button

A checkout form using styled radio buttons

Learn how to make the individual splat animation on YouTube here: https://youtu.be/O6dc-sJm0Ho And here's the pen I made during that tutorial: http://codepen.io/chrisgannon/pen/Xddawq/

Testing out some input radio selecting concept with an animated slide to whow which one is selected.

A Fancy Checkbox/Radio buttons with small transition, enjoy it! Update: Change styles and implement SCSS

4 different ways to easily customize radio buttons. Inspiration: design.google.com/articles/evolving-the-google-identity/

Animated switch build with radio buttons.

Radio buttons that are styled as actual buttons. CSS only.

Simple toggle button.

A simple input radio style. Sass is the way!

This is a work in progress

Tired of boring ole' radio buttons? Why, take a peek at this wondrous mystique. Brought to you by the Hamburger Network.

Animate the checking and the unchecking, using SASS and Bourbon.

Radio buttons reimagined. This is based on the common survey answers of "never, sometimes, often, usually, always."

A CSS Trick to style a radio button . Resource: http://css-tricks.com/almanac/selectors/c/checked/

An experiment in striking through parts of a sentence as a way of interacting with radio inputs...

Simple radio input using the :checked psuedo class

Styled radio buttons that still allows for keyboard input (at least in Chrome).

no JS, no img, full em, editable text (flexible)

Based off of Nate Wiley's "Styled Radio Buttons" pen. Similar concept but with a flat design. Play around with color variables ($red, $blue, $green) to adjust the colors of the buttons.

Two very nice radio buttons joined together as a toggle switch.

Pure HTML/CSS animated and styled radio buttons with label (no extra elements required). Did these for a recent project and was quite happy with them.

Skinned some radio buttons to give them an elevated effect.

First example of some simple custom checkboxes and radio buttons made with pure (s)css. These only work in chrome, but fallback to the native ones in other browsers. Check back soon for some other examples. Also see: - http://codepen.io/Sambego/pen/zDLxe - http://codepen.io/Sambego/pen...

Read More

Originally forked from Bennett Feely's Fluid Radio Buttons: http://codepen.io/bennettfeely/pen/Bmzeg

Simple Radio Group using Css3

Some radio buttons and checkboxes

Just a fun little radio checkbox form using my favourite colour and some custom focus styles.

An accessible radio button group with the last radio triggering an input for the user to enter a different amount.

Customise the way radio buttons are displayed, so they look different from the standard browser-rendered radio buttons, but without changing the functionality. Also with tooltips.

Simple yet powerful idea of making radio buttons available to users horizontally. Traditionally, radio buttons should be presented vertically for good UX – this way makes it easier to understand the option+label connection.

When you need to fake a transition between two different icons. The unchecked radio button mimics this material icon - https://material.io/tools/icons/?search=radio&icon=radio_button_unchecked&style=round. While the checked version uses the actual icon.

A Simple Implementation of custom made animated Radio Buttons and CheckBoxes

CSS only progress bar using radio buttons.

Learn how to create custom, accessible radio and checkbox buttons in CSS that perfectly align with their labels. Tutorial on CodyHouse: https://codyhouse.co/blog/post/custom-accessible-radio-checkbox-buttons-vertical-alignment

Custom input checkbox and radio