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.

See the Pen Radio Buttons With Marble and Wood by Jon Kantner (@jkantner) on CodePen.

NEUMORPHIC RADIO

See the Pen Neumorphic Radio by halvves (@halvves) on CodePen.

RADIO HOPPING

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

See the Pen Radio Hopping by Jon Kantner (@jkantner) on CodePen.

2020 TOGGLES

See the Pen 2020 Toggles by Aaron Iker (@aaroniker) on CodePen.

BULGY RADIOS

Another overly elaborate radio animation.

See the Pen Bulgy radios by Liam (@liamj) on CodePen.

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.

See the Pen Recreation: Card theme switcher by Dean Hidri (@visualcookie) on CodePen.

CUSTOM RADIO BUTTONS

See the Pen CSS Only: Custom Radio Buttons by Abubaker Saeed (@AbubakerSaeed) on CodePen.

PURE CSS RADIO BUTTONS (DARK/LIGHT)

See the Pen Checkboxes and radios (dark/light) – pure css – #06 by Ivan Grozdic (@ig_design) on CodePen.

GET FIT

Brandon McConnell

See the Pen Get Fit by Brandon McConnell (@brandonmcconnell) on CodePen.

ANIMATED SVG RADIO BUTTONS

Animated SVG radio buttons using CSS.

See the Pen Animated SVG radio buttons by Andrej Sharapov (@andrejsharapov) on CodePen.

UNDERGROUND RADIO BUTTONS

The radio button highlight travels underground.

See the Pen Underground radios by Mikael Ainalem (@ainalem) on CodePen.

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.

See the Pen Radio Button Dot-Slider (Pure CSS) by Brandon McConnell (@brandonmcconnell) on CodePen.

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.

See the Pen Mobile Radio Buttons with small animation by Benjamin Koehler (@Benny29390) on CodePen.

FANCY CHECKBOXES AND RADIO BUTTONS

Fancy checkboxes and radio buttons with Font Awesome.

See the Pen Fancy Checkboxes and Radio Buttons — with Font Awesome by Jase (@jasesmith) on CodePen.

RADIO BUTTONS INTERACTION

Radio buttons interaction with HTML and CSS.

See the Pen Radio Buttons Interaction ✨ by Dronca Raul (@rauldronca) on CodePen.

RADIO INPUT

See the Pen Radio Input by Aaron Iker (@aaroniker) on CodePen.

CHECKBOX & RADIO BUTTONS

macOS Mojave dark mode checkbox & radio buttons.

See the Pen macOS Mojave dark mode checkbox & radio buttons by Andreas Storm (@avstorm) on CodePen.

ALIGNMENT RADIO BUTTONS

CSS tricks: use flex-grow for transition.

See the Pen [CSS] Alignment button by Rplus (@Rplus) on CodePen.

MATERIAL DESIGN RADIO BUTTONS

Pure CSS Material Design radio buttons.

See the Pen Material Design Radio Buttons by Andreas Storm (@avstorm) on CodePen.

WOBBLE RADIO BUTTONS

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

See the Pen Wobble radiobuttons by Tamino Martinius (@Zaku) on CodePen.

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.

See the Pen Responsive Toggle Switch by Darin (@dsenneff) on CodePen.

SMILE TOGGLE (HTML + CSS)

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

See the Pen Smile Toggle | HTML + CSS by Cameron Fitzwilliam (@CameronFitzwilliam) on CodePen.

PURE CSS-SVG RADIO SELECTOR BUTTONS

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

See the Pen Pure CSS – SVG Radio Selector Buttons by Nikki Pantony (@nikkipantony) on CodePen.

SLAP TOGGLE

CSS slap toggle.

See the Pen Slap Toggle by Yariv Fruend (@YarivFrd) on CodePen.

INPUT RADIO

Simple input radio style.

See the Pen Input Radio by Andreas Storm (@avstorm) on CodePen.

☑️ 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.

See the Pen ☑️ Transform Toggles, will-change ☑️ by Shaw (@shshaw) on CodePen.

MATERIAL INSPIRED RADIO GROUPS

HTML and CSS radio groups.

TOGGLE RADIO INTPUT

Toggle radio intput with the label.

See the Pen Toggle radio intput with the label by Andrew Vereshchak (@multum) on CodePen.

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 🙂

[su_button url=” http://codepen.io/tomma5o/pen/grJyzL/  ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/jelly-radio-button.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Hidden Radio Messages/Tooltips

Hidden radio messages/tooltips in HTML and CSS.

[su_button url=” http://codepen.io/joshua_ward/pen/MbNwpd/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/hidden-radio-messages-tooltips.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Ripple Animation On Input Type Radio And Checkbox

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

[su_button url=” http://codepen.io/wilder_taype/pen/pNXwMW/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/ripple-animation-on-input-type-radio-and-checkbox.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

CSS Radio Buttons

A simple and elegant CSS radio button.

[su_button url=” http://codepen.io/triss90/pen/XNEdRe/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/css-radio-buttons.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Radio Group Using Labels

Radio group using labels with HTML and CSS.

[su_button url=” http://codepen.io/samkeddy/pen/PbROLK/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/radio-group-using-labels.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Radio Button Big Square

Pure CSS radio button big square.

[su_button url=” http://codepen.io/gabrielferreira/pen/oYxNVy/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/radio-button-big-square-pure-css.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Animated Checkbox And Radio Buttons

Animated CSS-only checkbox and radio switches.

[su_button url=” http://codepen.io/koljakutschera/pen/YGvwGB/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/animated-css-only-checkbox-and-radio-switches.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Radio Selects

Radio selects: flexbox and fun.

[su_button url=” http://codepen.io/adamstuartclark/pen/pbYVYR/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/radio-selects-flexbox-and-fun.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Checkout Form

A checkout form using styled radio buttons.

[su_button url=” http://codepen.io/RRoberts/pen/kXvVrR/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/checkout-form.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

SVG Splat Radio Buttons

HTML, CSS and SVG splat radio buttons.

[su_button url=” http://codepen.io/chrisgannon/pen/BoXLOJ/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/svg-splat-radio-buttons.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Radio Buttons

Open different windows by clicking a radio buttons.

[su_button url=” http://codepen.io/imtoobose/pen/zqjgry/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/radio-buttons-3.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

CSS Only Input Radio Select Concept

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

[su_button url=” http://codepen.io/web-tiki/pen/JXwLGQ/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/css-only-input-radio-select-concept.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Input & Radio-Button

Pure CSS input & radio-button.

[su_button url=” http://codepen.io/opheliafl/pen/LGKMNL/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/input-radio-button.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Very Simple Radio Buttons

HTML and CSS just very simple radio buttons.

[su_button url=” http://codepen.io/pamdayne/pen/jqxYBx/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/just-very-simple-radio-buttons.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Pure CSS Fancy Checkbox/Radio

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

[su_button url=” http://codepen.io/raubaca/pen/ONzBxP/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/pure-css-fancy-checkbox-radio.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Google Dots Radio Buttons

4 different ways to easily customize radio buttons.

[su_button url=” http://codepen.io/victorfreire/pen/XXzqEr/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/google-dots-radio-buttons.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Animated Switch For Radio Buttons

CSS only animated switch build with radio buttons.

[su_button url=” http://codepen.io/fredjens/pen/adqLNO/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/animated-switch-for-radio-buttons-css-only.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Material Radio Button

Material radio button with HTML, CSS and JavaScript.

[su_button url=” http://codepen.io/montechristos/pen/EPvOwJ/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/material-radio-button.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Google Maps Radio Buttons CSS Only

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

[su_button url=” http://codepen.io/eliasmeire/pen/JGjaov/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/google-maps-radio-buttons-css-only.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Simple Toggle

Simple toggle button.

[su_button url=” http://codepen.io/magnificode/pen/ojYJJP/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/simple-toggle.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Radio Button CSS

A simple input radio style. Sass is the way!

[su_button url=” http://codepen.io/lorenzodianni/pen/ByXMYB/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/material-design-radio-button-css-scss.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Fancy Radio Button

Fancy radio button that looks like a checkbox.

[su_button url=” http://codepen.io/stacy/pen/GpZvzN/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/fancy-radio-button-that-looks-like-a-checkbox.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Custom CSS3 Radio Button

Custom HTML and CSS radio button.

[su_button url=” http://codepen.io/sodapop/pen/GpgEeE/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/custom-css3-radio-button-radiosplosion.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

CSS Ripple/Wave Checkbox And Radio Button

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

[su_button url=” http://codepen.io/msisto/pen/lCofE/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/css-ripple-wave-checkbox-and-radio-button.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Radio Button Input Scale

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

[su_button url=” http://codepen.io/calebduren/pen/QbzmLv/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/radio-button-input-scale.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Stylish Radio Buttons

CSS only stylish radio buttons.

[su_button url=” http://codepen.io/yunntan/pen/rayKjK/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/stylish-radio-buttons-css-only.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Radio Button Styling

HTML and CSS radio button styling.

[su_button url=” http://codepen.io/mortenolsendk/pen/QbvBYy/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/radio-button-styling.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

CSS Styling Radio Button

Tricks giving style to a radio button.

[su_button url=” http://codepen.io/AngelaVelasquez/pen/Eypnq/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/css-styling-radio-button.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Strikethrough Radios

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

[su_button url=” http://codepen.io/blucube/pen/bdGvLp/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/strikethrough-radios.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Radio Input

Simple radio input using the :checked psuedo class.

[su_button url=” http://codepen.io/havardob/pen/zqjqrq/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/daily-ui-02-radio-input.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Flat Radio Button Inputs

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

[su_button url=” http://codepen.io/kristofferh/pen/MyOKMo/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/snacks-flat-radio-button-inputs.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Radio Control

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

[su_button url=” http://codepen.io/SitePoint/pen/QwoeVG/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/radio-control.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Radio Buttons

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

[su_button url=” http://codepen.io/jlwebart/pen/VYzxLK/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/radio-buttons-2.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

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.

[su_button url=” http://codepen.io/mblode/pen/gGIAm/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/flat-radio-yes-no.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Awesome Toggle Button

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

[su_button url=” http://codepen.io/theawesomecoder61/pen/nigEq/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/awesome-toggle-button.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Radio Checked Style

Checked radio style. Awesome.

[su_button url=” http://codepen.io/l4ci/pen/zAiws/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/radio-checked-style.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

2 Elements 1 Styled Radio

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

[su_button url=” http://codepen.io/quagliero/pen/AtLbr/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/2-elements-1-styled-radio.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Balloon Radio Buttons

Skinned some radio buttons to give them an elevated effect.

[su_button url=” http://codepen.io/roboteight/pen/shyDC/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/balloon-radio-buttons.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

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.

[su_button url=” http://codepen.io/Sambego/pen/yiruz/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/custom-checkboxes-radio-buttons-1.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Bouncy Radio Buttons!

Radio buttons with HTML and CSS.

[su_button url=” http://codepen.io/jringenberg/pen/oDcpq/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/bouncy-radio-buttons.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Simple Radio Group Using CSS3

Simple radio group using CSS3.

[su_button url=” http://codepen.io/ig0ramad0/pen/tszLC/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/simple-radio-group.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Radio Buttons

HTML and CSS radio buttons.

[su_button url=” http://codepen.io/WhiteWolfWizard/pen/Dngmx/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/radio-buttons.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Cool Radio Buttons

HTML and CSS radio button.

[su_button url=” http://codepen.io/er40/pen/qliAe/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=” https://freefrontend.com/assets/zip/css-radio-buttons/cool-radio.zip ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]