Collection of HTML and CSS radio button code examples: custom, multiple and radio button group. Update of March 2020 collection. 11 new items.
Related Articles
Links
Made with
- HTML / CSS
About a code
Custom Radio Buttons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Radios Under the Hood
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Radio Button Styling
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Status Filter
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: tailwind.css
Links
Made with
- HTML / CSS
About a code
Literal Radio Buttons
Radio buttons turned into radio buttons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Custom Radio Buttons
Accessible custom radio buttons with CSS only.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Pill Styled Radio Buttons Fully Scaleable
Custom radio button style using only CSS (SCSS) by taking advantage of sibling selectors and the :checked psuedo class.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (Sass)
About a code
Radio Button Group
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Neumorphic Toggle
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Bounce Radio
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Radio Button Animation - Only CSS
Simple radio button animation - only CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (Sass)
About a code
Radio Buttons With Marble and Wood
Interaction with radio buttons made to look like Chinese checkers on a wooden board.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Neumorphic Radio
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (Sass)
About a code
Radio Hopping
As you select different options, watch the dot worm hop from the previous to the current.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
2020 Toggles
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Bulgy Radios
Another overly elaborate radio animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
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.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Custom Radio Buttons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Pure CSS Radio Buttons (Dark/Light)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css, unicons.css
Links
Made with
- HTML / CSS (SCSS)
About a code
Get Fit
Brandon McConnell
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Animated SVG Radio Buttons
Animated SVG radio buttons using CSS.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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: -
Links
Made with
- HTML / CSS (SCSS)
About a code
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.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
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
Links
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: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Radio Input
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
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: -
Links
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
Links
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: -
Links
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.
Links
Made with
- HTML
- CSS/SCSS
About the code
Smile Toggle (HTML + CSS)
Radio button with CSS by using the :checked~(classname) state.
Links
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.
Links
Made with
- HTML
- CSS
- JavaScript
About the code
Slap Toggle
CSS slap toggle.
Links
Made with
- HTML
- CSS/Sass
About the code
Input Radio
Simple input radio style.
Links
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: -
Links
Made with
- HTML
- CSS/SCSS
About the code
Material Inspired Radio Groups
HTML and CSS radio groups.
Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jQuery.js, bootstrap.js, slick.js)
About the code
Toggle Radio Intput
Toggle radio intput with the label.
Links
Made with
- HTML
- CSS
- JavaScript (jQuery.js)
About the code
Custom Radio Buttons Survey
Custom radio buttons survey with jQuery.
Links
Made with
- HTML
- CSS/SCSS
About the code
Styling Radio Buttons
Pure CSS styling radio buttons.
Links
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).
Links
Made with
- HTML
- CSS
About the code
Liquid Radio Button
Liquid radio button with SVG.
Links
Made with
- HTML
- CSS/SCSS
About the code
Custom Radio Buttons
HTML and CSS custom radio buttons.
Links
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