TOP 77 Radio Buttons CSS

RADIO BUTTONS WITH MARBLE AND WOOD

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

NEUMORPHIC RADIO

RADIO HOPPING

As you select different options, watch the dot worm hop from the previous to the current.

2020 TOGGLES

BULGY RADIOS

Another overly elaborate radio animation.

CARD THEME SWITCHER

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.

CUSTOM RADIO BUTTONS

PURE CSS RADIO BUTTONS (DARK/LIGHT)

GET FIT

Brandon McConnell

ANIMATED SVG RADIO BUTTONS

Animated SVG radio buttons using CSS.

UNDERGROUND RADIO BUTTONS

The radio button highlight travels underground.

PURE CSS RADIO BUTTON DOT-SLIDER

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

MOBILE RADIO BUTTONS WITH SMALL ANIMATION

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

FANCY CHECKBOXES AND RADIO BUTTONS

Fancy checkboxes and radio buttons with Font Awesome.

RADIO BUTTONS INTERACTION

Radio buttons interaction with HTML and CSS.

RADIO INPUT

CHECKBOX & RADIO BUTTONS

macOS Mojave dark mode checkbox & radio buttons.

ALIGNMENT RADIO BUTTONS

CSS tricks: use flex-grow for transition.

MATERIAL DESIGN RADIO BUTTONS

Pure CSS Material Design radio buttons.

WOBBLE RADIO BUTTONS

UI snippet for radio buttons in HTML, CSS and JS.

RESPONSIVE TOGGLE SWITCH

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

SMILE TOGGLE (HTML + CSS)

Radio button with CSS by using the :checked~(classname) state.

PURE CSS-SVG RADIO SELECTOR BUTTONS

Example built using just CSS and SVG’s, no JS needed. Inspired by Google Material Design.

SLAP TOGGLE

CSS slap toggle.

INPUT RADIO

Simple input radio style.

TRANSFORM TOGGLES, WILL-CHANGE

A transform-only version of Flexbox Toggles to compare performance and code. This takes it a little further with will-change for buttery-smooth animation without repaints.

MATERIAL INSPIRED RADIO GROUPS

HTML and CSS radio groups.

TOGGLE RADIO INTPUT

Toggle radio intput with the label.

CUSTOM RADIO BUTTONS SURVEY

Custom radio buttons survey with jQuery.

STYLING RADIO BUTTONS

Pure CSS styling radio buttons.

LIQUID RADIO BUTTON

Liquid radio button using SVG and GSAP (GreenSock).

LIQUID RADIO BUTTON

Liquid radio button with SVG.

CUSTOM RADIO BUTTONS

HTML and CSS custom radio buttons.

RADIO BUTTON CIRCUIT

Radio button circuit with HTMl and CSS.

Jelly Radio Button

Sticky radio button. Enjoy this flat and simple styling of radio button in only vanilla CSS

Demo and Download Demo and Download

Hidden Radio Messages/Tooltips

Hidden radio messages/tooltips in HTML and CSS.

Demo and Download Demo and Download

Ripple Animation On Input Type Radio And Checkbox

HTML and CSS ripple animation on input type radio and checkbox.

Demo and Download Demo and Download

CSS Radio Buttons

A simple and elegant CSS radio button.

Demo and Download Demo and Download

Radio Group Using Labels

Radio group using labels with HTML and CSS.

Demo and Download Demo and Download

Radio Button Big Square

Pure CSS radio button big square.

Demo and Download Demo and Download

Animated Checkbox And Radio Buttons

Animated CSS-only checkbox and radio switches.

Demo and Download Demo and Download

Radio Selects

Radio selects: flexbox and fun.

Demo and Download Demo and Download

Checkout Form

A checkout form using styled radio buttons.

Demo and Download Demo and Download

SVG Splat Radio Buttons

HTML, CSS and SVG splat radio buttons.

Demo and Download Demo and Download

Radio Buttons

Open different windows by clicking a radio buttons.

Demo and Download Demo and Download

CSS Only Input Radio Select Concept

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

Demo and Download Demo and Download

Input & Radio-Button

Pure CSS input & radio-button.

Demo and Download Demo and Download

Very Simple Radio Buttons

HTML and CSS just very simple radio buttons.

Demo and Download Demo and Download

Pure CSS Fancy Checkbox/Radio

A Fancy Checkbox/Radio buttons with small transition, enjoy it!

Demo and Download Demo and Download

Google Dots Radio Buttons

4 different ways to easily customize radio buttons.

Demo and Download Demo and Download

Animated Switch For Radio Buttons

CSS only animated switch build with radio buttons.

Demo and Download Demo and Download

Material Radio Button

Material radio button with HTML, CSS and JavaScript.

Demo and Download Demo and Download

Google Maps Radio Buttons CSS Only

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

Demo and Download Demo and Download

Simple Toggle

Simple toggle button.

Demo and Download Demo and Download

Radio Button CSS

A simple input radio style. Sass is the way!

Demo and Download Demo and Download

Fancy Radio Button

Fancy radio button that looks like a checkbox.

Demo and Download Demo and Download

Custom CSS3 Radio Button

Custom HTML and CSS radio button.

Demo and Download Demo and Download

CSS Ripple/Wave Checkbox And Radio Button

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

Demo and Download Demo and Download

Radio Button Input Scale

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

Demo and Download Demo and Download

Stylish Radio Buttons

CSS only stylish radio buttons.

Demo and Download Demo and Download

Radio Button Styling

HTML and CSS radio button styling.

Demo and Download Demo and Download

CSS Styling Radio Button

Tricks giving style to a radio button.

Demo and Download Demo and Download

Strikethrough Radios

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

Demo and Download Demo and Download

Radio Input

Simple radio input using the :checked psuedo class.

Demo and Download Demo and Download

Flat Radio Button Inputs

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

Demo and Download Demo and Download

Radio Control

This pen is used in the SitePoint article – Theming Form Elements with Sass.

Demo and Download Demo and Download

Radio Buttons

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

Demo and Download Demo and Download

Flat Radio – Yes/No

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.

Demo and Download Demo and Download

Awesome Toggle Button

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

Demo and Download Demo and Download

Radio Checked Style

Checked radio style. Awesome.

Demo and Download Demo and Download

2 Elements 1 Styled Radio

Pure HTML/CSS animated and styled radio buttons with label (no extra elements required).

Demo and Download Demo and Download

Balloon Radio Buttons

Skinned some radio buttons to give them an elevated effect.

Demo and Download Demo and Download

Custom Checkboxes/Radio Buttons

Example of some simple custom checkboxes and radio buttons made with pure CSS. These only work in chrome, but fallback to the native ones in other browsers.

Demo and Download Demo and Download

Bouncy Radio Buttons!

Radio buttons with HTML and CSS.

Demo and Download Demo and Download

Simple Radio Group Using CSS3

Simple radio group using CSS3.

Demo and Download Demo and Download

Radio Buttons

HTML and CSS radio buttons.

Demo and Download Demo and Download

Cool Radio Buttons

HTML and CSS radio button.

Demo and Download Demo and Download