66 Radio Buttons CSS

Collection of HTML and CSS custom radio buttons. Update of May 2018 collection. 10 new items.

Related Articles

1. CSS Checkboxes
2. CSS Toggle Switches

Author

• Mikael Ainalem
• January 15, 2019

Links

• demo and code

Made with

• HTML / CSS

About the code

Underground Radio Buttons

The radio button highlight travels underground.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

• Benjamin Koehler
• October 18, 2018

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

• Jase
• August 23, 2018

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Fancy Checkboxes and Radio Buttons

Fancy checkboxes and radio buttons with Font Awesome.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

• Dronca Raul
• August 6, 2018

Links

• demo and code

Made with

• HTML / CSS

About the code

Radio Buttons Interaction

Radio buttons interaction with HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

• Aaron Iker
• July 9, 2018

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Radio Input

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

• Andreas Storm
• June 13, 2018

Links

• demo and code

Made with

• HTML / CSS (Stylus)

About the code

Checkbox & Radio Buttons

macOS Mojave dark mode checkbox & radio buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

• Rplus
• May 27, 2018

Links

• demo and code
• dribbble shot

Made with

• HTML (Pug) / CSS (SCSS)

About the code

Alignment Radio Buttons

CSS tricks: use flex-grow for transition.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

• Andreas Storm
• May 25, 2018

Links

• demo and code
• dribbble shot

Made with

• HTML / CSS (Stylus)

About the code

Material Design Radio Buttons

Pure CSS Material Design radio buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css

Author

• Tamino Martinius
• May 18, 2018

Links

• demo and code

Made with

• HTML / CSS / JavaScript

About the code

Wobble Radio Buttons

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

• Darin
• April 30, 2018

Links

• demo and code

Made with

• HTML
• CSS/SCSS

About the code

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.

Author

• Cameron Fitzwilliam
• January 15, 2018

Links

• demo and code

Made with

• HTML
• CSS/SCSS

About the code

Smile Toggle (HTML + CSS)

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

Author

• Nikki Pantony
• January 6, 2018

Links

• demo and code

Made with

• HTML
• CSS

About the code

Pure CSS-SVG Radio Selector Buttons

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

Author

• Yariv Fruend
• January 6, 2018

Links

• demo and code

Made with

• HTML
• CSS
• JavaScript

About the code

Slap Toggle

CSS slap toggle.

Author

• Andreas Storm
• November 21, 2017

Links

• demo and code

Made with

• HTML
• CSS/Sass

About the code

Input Radio

Simple input radio style.

Author

• Shaw
• November 9, 2017

Links

• demo and code

Made with

• HTML / CSS (Less)

About the code

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

• Buddy Reno
• September 12, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS

About the code

Material Inspired Radio Groups

HTML and CSS radio groups.

Author

• Andrey Vereshchak
• 03.08.2017

Links

• download
• demo and code

Made with

• HTML
• CSS/SCSS
• JavaScript (jQuery.js, bootstrap.js, slick.js)

About the code

Toggle Radio Intput

Toggle radio intput with the label.

Author

• Tobias Bogliolo
• 07.07.2017

Links

• download
• demo and code

Made with

• HTML
• CSS
• JavaScript (jQuery.js)

About the code

Custom Radio Buttons Survey

Custom radio buttons survey with jQuery.

Author

• Alexander Repeta
• 30.06.2017

Links

• download
• demo and code

Made with

• HTML
• CSS/SCSS

About the code

Styling Radio Buttons

Pure CSS styling radio buttons.

Author

• Ryan LaBar
• 06.06.2017

Links

• download
• demo and code

Made with

• HTML
• CSS/SCSS
• JavaScript (jQuery.js, TweenMax.js)
• SVG

About the code

Liquid Radio Button

Liquid radio button using SVG and GSAP (GreenSock).

Author

• Tamino Martinius
• 02.06.2017

Links

• download
• demo and code

Made with

• HTML
• CSS

About the code

Liquid Radio Button

Liquid radio button with SVG.

Author

• Dronca Raul
• 24.03.2017

Links

• download
• demo and code

Made with

• HTML
• CSS/SCSS

About the code

Custom Radio Buttons

HTML and CSS custom radio buttons.

Author

• LukasOe
• 13.02.2017

Links

• download
• demo and code

Made with

• HTML/Haml
• CSS/Sass

About the code

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 :)
Made by Tommaso Poletti
February 9, 2017

Hidden Radio Messages/Tooltips

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

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

CSS Radio Buttons

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

Radio Group Using Labels

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

Radio Button Big Square

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

Animated Checkbox And Radio Buttons

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

Radio Selects

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

Checkout Form

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

SVG Splat Radio Buttons

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

Radio Buttons

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

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

Input & Radio-Button

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

Very Simple Radio Buttons

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

Pure CSS Fancy Checkbox/Radio

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

Google Dots Radio Buttons

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

Animated Switch For Radio Buttons

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

Material Radio Button

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

Google Maps Radio Buttons CSS Only

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

Simple Toggle

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

Radio Button CSS

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

Fancy Radio Button

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

Custom CSS3 Radio Button

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

CSS Ripple/Wave Checkbox And Radio Button

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

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

Stylish Radio Buttons

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

Radio Button Styling

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

CSS Styling Radio Button

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

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

Radio Input

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

Flat Radio Button Inputs

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

Radio Control

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

Radio Buttons

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

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

Awesome Toggle Button

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

Radio Checked Style

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

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

Balloon Radio Buttons

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

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

Bouncy Radio Buttons!

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

Simple Radio Group Using CSS3

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

Radio Buttons

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

Cool Radio Buttons

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