FreeFrontend

43 CSS Radio Buttons

February 19, 2017 | 20 Minute Read

Collection of HTML and CSS radio buttons. Demo and download code (*zip).

Demo Image: Jelly Radio Button
Jelly Radio Button (demo image)

Jelly Radio Button

Sticky radio button. Enjoy this flat and simple styling of radio button in only vanilla CSS :)
Made by Tommaso Poletti
February 9, 2017

download demo and code

See the Pen Jelly Radio Button by Tommaso Poletti (@tomma5o) on CodePen.

Demo Image: Hidden Radio Messages/Tooltips
Hidden Radio Messages/Tooltips (demo image)

Hidden Radio Messages/Tooltips

Hidden radio messages/tooltips in HTML and CSS.
Made by Joshua Ward
January 6, 2017

download demo and code

See the Pen Hidden Radio Messages/Tooltips by Joshua Ward (@joshua_ward) on CodePen.

Demo Image: Ripple Animation On Input Type Radio And Checkbox
Ripple Animation On Input Type Radio And Checkbox (demo image)

Ripple Animation On Input Type Radio And Checkbox

HTML and CSS ripple animation on input type radio and checkbox.
Made by WILDER TAYPE
December 27, 2016

download demo and code
Demo Image: CSS Radio Buttons
CSS Radio Buttons (demo image)

CSS Radio Buttons

A simple and elegant CSS radio button.
Made by Tristan White
December 13, 2016

download demo and code

See the Pen CSS Radio Buttons by Tristan White (@triss90) on CodePen.

Demo Image: Radio Group Using Labels
Radio Group Using Labels (demo image)

Radio Group Using Labels

Radio group using labels with HTML and CSS.
Made by Sam Keddy
December 5, 2016

download demo and code

See the Pen Radio Group using labels by Sam Keddy (@samkeddy) on CodePen.

Demo Image: Radio Button Big Square
Radio Button Big Square (demo image)

Radio Button Big Square

Pure CSS radio button big square.
Made by Gabriel Ferreira
November 12, 2016

download demo and code

See the Pen Radio Button Big Square [Pure CSS] by Gabriel Ferreira (@gabrielferreira) on CodePen.

Demo Image: Animated Checkbox And Radio Buttons
Animated Checkbox And Radio Buttons (demo image)

Animated Checkbox And Radio Buttons

Animated CSS-only checkbox and radio switches.
Made by Kolja Kutschera
October 12, 2016

download demo and code
Demo Image: Radio Selects
Radio Selects (demo image)

Radio Selects

Radio selects: flexbox and fun.
Made by Adam Clark
August 17, 2016

download demo and code
Demo Image: Checkout Form
Checkout Form (demo image)

Checkout Form

A checkout form using styled radio buttons.
Made by Rosa
July 16, 2016

download demo and code

See the Pen Checkout Form by Rosa (@RRoberts) on CodePen.

Demo Image: SVG Splat Radio Buttons
SVG Splat Radio Buttons (demo image)

SVG Splat Radio Buttons

HTML, CSS and SVG splat radio buttons.
Made by Chris Gannon
June 18, 2016

download demo and code

See the Pen SVG Splat Radio Buttons by Chris Gannon (@chrisgannon) on CodePen.

Demo Image: Radio Buttons
Radio Buttons (demo image)

Radio Buttons

Open different windows by clicking a radio buttons.
Made by Saumitra Bose
June 1, 2016

download demo and code

See the Pen Radio Buttons by Saumitra Bose (@imtoobose) on CodePen.

Demo Image: CSS Only Input Radio Select Concept
CSS Only Input Radio Select Concept (demo image)

CSS Only Input Radio Select Concept

Testing out some input radio selecting concept with an animated slide to whow which one is selected.
Made by web-tiki
May 9, 2016

download demo and code
Demo Image: Input & Radio-Button
Input & Radio-Button (demo image)

Input & Radio-Button

Pure CSS input & radio-button.
Made by Ophelia Fournier-Laflamme
April 27, 2016

download demo and code

See the Pen Input & Radio-button by Ophelia Fournier-Laflamme (@opheliafl) on CodePen.

Demo Image: Very Simple Radio Buttons
Very Simple Radio Buttons (demo image)

Very Simple Radio Buttons

HTML and CSS just very simple radio buttons.
Made by Pamela Dayne
April 17, 2016

download demo and code

See the Pen Just very simple radio buttons by Pamela Dayne (@pamdayne) on CodePen.

Demo Image: Pure CSS Fancy Checkbox/Radio
Pure CSS Fancy Checkbox/Radio (demo image)

Pure CSS Fancy Checkbox/Radio

A Fancy Checkbox/Radio buttons with small transition, enjoy it!
Made by Raúl Barrera
April 11, 2016

download demo and code

See the Pen Pure CSS Fancy Checkbox/Radio by Raúl Barrera (@raubaca) on CodePen.

Demo Image: Google Dots Radio Buttons
Google Dots Radio Buttons (demo image)

Google Dots Radio Buttons

4 different ways to easily customize radio buttons.
Made by Victor Freire
March 5, 2016

download demo and code

See the Pen Google Dots Radio Buttons by Victor Freire (@victorfreire) on CodePen.

Demo Image: Animated Switch For Radio Buttons
Animated Switch For Radio Buttons (demo image)

Animated Switch For Radio Buttons

CSS only animated switch build with radio buttons.
Made by Fredrik Jensen
January 23, 2016

download demo and code
Demo Image: Material Radio Button
Material Radio Button (demo image)

Material Radio Button

Material radio button with HTML, CSS and JavaScript.
Made by CODEARMADA
January 14, 2016

download demo and code

See the Pen Material Radio Button by CODEARMADA (@montechristos) on CodePen.

Demo Image: Google Maps Radio Buttons CSS Only
Google Maps Radio Buttons CSS Only (demo image)

Google Maps Radio Buttons CSS Only

Radio buttons that are styled as actual buttons. CSS only.
Made by Elias Meire
December 7, 2015

download demo and code

See the Pen Google maps radio buttons CSS only by Elias Meire (@eliasmeire) on CodePen.

Demo Image: Simple Toggle
Simple Toggle (demo image)

Simple Toggle

Simple toggle button.
Made by Dominic Magnifico
September 28, 2015

download demo and code

See the Pen Simple Toggle by Dominic Magnifico (@magnificode) on CodePen.

Demo Image: Radio Button CSS
Radio Button CSS (demo image)

Radio Button CSS

A simple input radio style. Sass is the way!
Made by Lorenzo D'Ianni
September 25, 2015

download demo and code
Demo Image: Fancy Radio Button
Fancy Radio Button (demo image)

Fancy Radio Button

Fancy radio button that looks like a checkbox.
Made by Stacy
September 17, 2015

download demo and code
Demo Image: Custom CSS3 Radio Button
Custom CSS3 Radio Button (demo image)

Custom CSS3 Radio Button

Custom HTML and CSS radio button.
Made by sodapop
September 4, 2015

download demo and code
Demo Image: CSS Ripple/Wave Checkbox And Radio Button
CSS Ripple/Wave Checkbox And Radio Button (demo image)

CSS Ripple/Wave Checkbox And Radio Button

Animate the checking and the unchecking, using SASS and Bourbon.
Made by Matt Sisto
August 21, 2015

download demo and code
Demo Image: Radio Button Input Scale
Radio Button Input Scale (demo image)

Radio Button Input Scale

Radio buttons reimagined. This is based on the common survey answers of "never, sometimes, often, usually, always."
Made by Caleb Duren
August 2, 2015

download demo and code

See the Pen Radio Button Input Scale by Caleb Duren (@calebduren) on CodePen.

Demo Image: Stylish Radio Buttons
Stylish Radio Buttons (demo image)

Stylish Radio Buttons

CSS only stylish radio buttons.
Made by Simon Buisson
July 31, 2015

download demo and code

See the Pen Stylish radio buttons - CSS only by Simon Buisson (@yunntan) on CodePen.

Demo Image: Radio Button Styling
Radio Button Styling (demo image)

Radio Button Styling

HTML and CSS radio button styling.
Made by Morten Olsen
June 16, 2015

download demo and code

See the Pen Radio button styling by Morten Olsen (@mortenolsendk) on CodePen.

Demo Image: CSS Styling Radio Button
CSS Styling Radio Button (demo image)

CSS Styling Radio Button

Tricks giving style to a radio button.
Made by Angela Velasquez
May 26, 2015

download demo and code

See the Pen CSS Styling radio button by Angela Velasquez (@AngelaVelasquez) on CodePen.

Demo Image: Strikethrough Radios
Strikethrough Radios (demo image)

Strikethrough Radios

An experiment in striking through parts of a sentence as a way of interacting with radio inputs...
Made by Ed Hicks
April 23, 2015

download demo and code

See the Pen Strikethrough Radios by Ed Hicks (@blucube) on CodePen.

Demo Image: Radio Input
Radio Input (demo image)

Radio Input

Simple radio input using the :checked psuedo class.
Made by Håvard Brynjulfsen
April 15, 2015

download demo and code

See the Pen Daily UI #02 | Radio input by Håvard Brynjulfsen (@havardob) on CodePen.

Demo Image: Flat Radio Button Inputs
Flat Radio Button Inputs (demo image)

Flat Radio Button Inputs

Styled radio buttons that still allows for keyboard input (at least in Chrome).
Made by Kris Hedstrom
April 4, 2015

download demo and code

See the Pen Snacks? Flat radio button inputs... by Kris Hedstrom (@kristofferh) on CodePen.

Demo Image: Radio Control
Radio Control (demo image)

Radio Control

This pen is used in the SitePoint article - Theming Form Elements with Sass.
Made by SitePoint
March 31, 2015

download demo and code

See the Pen Radio Control by SitePoint (@SitePoint) on CodePen.

Demo Image: Radio Buttons
Radio Buttons (demo image)

Radio Buttons

No JS, no img, full em, editable text (flexible).
Made by Jonathan Levaillant
January 29, 2015

download demo and code

See the Pen Radio Buttons by Jonathan Levaillant (@jlwebart) on CodePen.

Demo Image: Flat Radio - Yes/No
Flat Radio - Yes/No (demo image)

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.
Made by Matthew Blode
October 27, 2014

download demo and code

See the Pen Flat Radio - Yes/No by Matthew Blode (@mblode) on CodePen.

Demo Image: Awesome Toggle Button
Awesome Toggle Button (demo image)

Awesome Toggle Button

Two very nice radio buttons joined together as a toggle switch.
Made by Andrew
October 7, 2014

download demo and code

See the Pen Awesome Toggle Button by Andrew (@theawesomecoder61) on CodePen.

Demo Image: Radio Checked Style
Radio Checked Style (demo image)

Radio Checked Style

Checked radio style. Awesome.
Made by Volker Otto
September 30, 2014

download demo and code

See the Pen Radio checked style by Volker Otto (@l4ci) on CodePen.

Demo Image: 2 Elements 1 Styled Radio
2 Elements 1 Styled Radio (demo image)

2 Elements 1 Styled Radio

Pure HTML/CSS animated and styled radio buttons with label (no extra elements required).
Made by Tobias HarisonDenby
September 8, 2014

download demo and code

See the Pen 2 elements 1 styled radio by Tobias HarisonDenby (@quagliero) on CodePen.

Demo Image: Balloon Radio Buttons
Balloon Radio Buttons (demo image)

Balloon Radio Buttons

Skinned some radio buttons to give them an elevated effect.
Made by Chris Simari
July 26, 2014

download demo and code

See the Pen Balloon Radio Buttons by Chris Simari (@roboteight) on CodePen.

Demo Image: Custom Checkboxes/Radio Buttons
Custom Checkboxes/Radio Buttons (demo image)

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.
Made by Sam
July 7, 2014

download demo and code
Demo Image: Bouncy Radio Buttons!
Bouncy Radio Buttons! (demo image)

Bouncy Radio Buttons!

Radio buttons with HTML and CSS.
Made by Joe Ringenberg
June 19, 2014

download demo and code

See the Pen Bouncy Radio Buttons! by Joe Ringenberg (@jringenberg) on CodePen.

Demo Image: Simple Radio Group Using CSS3
Simple Radio Group Using CSS3 (demo image)

Simple Radio Group Using CSS3

Simple radio group using CSS3.
Made by Igor Amado
May 16, 2014

download demo and code

See the Pen Simple Radio Group by Igor Amado (@ig0ramad0) on CodePen.

Demo Image: Radio Buttons
Radio Buttons (demo image)

Radio Buttons

HTML and CSS radio buttons.
Made by White Wolf Wizard
February 19, 2014

download demo and code

See the Pen Radio Buttons by White Wolf Wizard (@WhiteWolfWizard) on CodePen.

Demo Image: Cool Radio Buttons
Cool Radio Buttons (demo image)

Cool Radio Buttons

HTML and CSS radio button.
Made by Eric Rogg
November 20, 2013

download demo and code

See the Pen Cool Radio by Eric Rogg (@er40) on CodePen.