CSS Radio Buttons: Looking for CSS Radio Buttons? In this post, I’ll share with you some hand-picked Popular CSS Radio Buttons, you can use in your next web-based projects. They’re easy to implement and will give your website or app a great look!
2020 Toggles
| Author: | Aaron Iker |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | January 11, 2020 |
Neumorphic Radio
| Author: | halvves |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | February 5, 2020 |
Bulgy radios
| Author: | Liam |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | May 18, 2019 |
Mobile Radio Buttons with small animation
| Author: | Benjamin Koehler |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | October 18, 2018 |
Animated SVG radio buttons
| Author: | Andrej Sharapov |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | February 28, 2019 |
Underground radios
| Author: | Mikael Ainalem |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | January 15, 2019 |
Responsive Toggle Switch
| Author: | Darin |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | April 29, 2018 |
Radio Buttons Interaction
| Author: | Dronca Raul |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | August 6, 2018 |
Radio Input
| Author: | Aaron Iker |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | July 10, 2018 |
Alignment button
| Author: | Rplus |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | May 27, 2018 |
Wobble radiobuttons
| Author: | Tamino Martinius |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | May 15, 2018 |
Pure CSS – SVG Radio Selector Buttons
| Author: | Nikki Pantony |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | January 5, 2018 |
Radio Button Circuit
| Author: | LukasOe |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | February 13, 2017 |
Material Inspired Checkboxes and Radio Groups
| Author: | Buddy Reno |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | September 12, 2017 |
Styling radio buttons
| Author: | Alexander Repeta |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | April 10, 2017 |
Liquid Radio Button
| Author: | Tamino Martinius |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | June 2, 2017 |
Jelly Radio Button
| Author: | Tommaso Poletti |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | May 18, 2016 |
Ripple animation on input type radio and Checkbox
| Author: | WILDER TAYPE |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | December 27, 2016 |
Radio Group using labels
| Author: | skeddles |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | December 5, 2016 |
Animated CSS-only checkbox and radio switches
| Author: | Kolja Kutschera |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | October 12, 2016 |
Checkout Form
| Author: | Rosa |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | July 16, 2016 |
Radio Buttons
| Author: | Saumitra Bose |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | April 19, 2016 |
Input & Radio-button
| Author: | Ophelia Fournier-Laflamme |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | February 22, 2016 |
Pure CSS Fancy Checkbox/Radio
| Author: | Raúl Barrera |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | April 8, 2016 |
Animated switch for radio buttons (css only)
| Author: | Fredrik Jensen |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | January 23, 2016 |
Google maps radio buttons CSS only
| Author: | Elias Meire |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | December 5, 2015 |
Material Design – Radio Button CSS [SCSS]
![Material Design - Radio Button CSS [SCSS]](https://shots.codepen.io/lorenzodianni/pen/ByXMYB-800.jpg?version=1545401624 "Material Design - Radio Button CSS [SCSS]")
| Author: | Lorenzo D’Ianni |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | April 16, 2015 |
Custom CSS3 Radio Button – Radiosplosion
| Author: | sodapop |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | September 3, 2015 |
Radio Button Input Scale
| Author: | Caleb Durenberger |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | August 2, 2015 |
Radio button styling
| Author: | Morten Olsen |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | June 8, 2015 |
Snacks? Flat radio button inputs…
| Author: | Kris Hedstrom |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | April 4, 2016 |
Radio Buttons
| Author: | Jonathan Levaillant |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | January 29, 2015 |
Awesome Toggle Button
| Author: | Andrew |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | October 7, 2014 |
2 elements 1 styled radio
| Author: | quag |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | September 8, 2014 |
Custom checkboxes / radio buttons #1
| Author: | Sam |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | July 5, 2014 |
Simple Radio Group
| Author: | Igor Amado |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | May 13, 2014 |
Custom Radio Button – CSS3
| Author: | Selvaraj U |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | August 3, 2016 |
Radio Buttons
| Author: | Gemma Stiles |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | May 12, 2020 |
Custom Radio Buttons
| Author: | Michael Burridge |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | May 10, 2019 |
Icon Transition :checked
| Author: | Amanda |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | September 25, 2018 |
CSS only progress bar from checkboxes
| Author: | Jacques Mostert |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | March 13, 2017 |
checkbox&radio custom input
| Author: | frederic |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | May 5, 2020 |
Custom radio/checkbox buttons with perfect alignment
| Author: | CodyHouse |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | September 4, 2020 |
Simple Custom Check Boxes and Radio Buttons
| Author: | Maruti Avantsa |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | March 18, 2017 |
Radio-btn-boxes
| Author: | johalv |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | June 4, 2020 |
Custom Other radio input
| Author: | Grace Snow |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | February 11, 2020 |
Custom Radio Buttons and Checkboxes
| Author: | Mehmet Erogul |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | August 4, 2020 |
Radio Button
| Author: | Akshat |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | January 17, 2019 |
Bouncy Radio Buttons!
| Author: | Joe Ringenberg |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | June 19, 2014 |
Balloon Radio Buttons
| Author: | Chris Simari |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | July 16, 2014 |
Radio checked style
| Author: | Volker Otto |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | September 30, 2014 |
Flat Radio – Yes/No
| Author: | Matthew Blode |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | September 7, 2014 |
Radio Control
| Author: | SitePoint |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | March 31, 2015 |
Daily UI #02 | Radio input
| Author: | Håvard Brynjulfsen |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | April 15, 2016 |
CSS radio buttons
| Author: | Angela Velasquez |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | January 3, 2014 |
Stylish radio buttons – CSS only
| Author: | Simon Buisson |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | January 15, 2015 |
CSS “Ripple/Wave” checkbox and radio button
| Author: | Matt Sisto |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | February 5, 2014 |
Fancy radio button that looks like a checkbox
| Author: | Stacy |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | September 17, 2015 |
Simple Toggle
| Author: | magnificode |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | September 28, 2015 |
Material Radio Button
| Author: | CODEARMADA |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | January 14, 2016 |
Google Dots Radio Buttons
| Author: | Victor Freire |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | January 19, 2016 |
Just very simple radio buttons
| Author: | Pamela Dayne |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | April 17, 2016 |
CSS only input radio select concept
| Author: | web-tiki |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | May 5, 2016 |
SVG Splat Radio Buttons
| Author: | Chris Gannon |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | November 29, 2015 |
Radio Selects: Flexbox and Fun
| Author: | Adam Clark |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | August 17, 2016 |
Radio Button Big Square [Just CSS]
![Radio Button Big Square [Just CSS]](https://shots.codepen.io/gabrielferreira/pen/oYxNVy-800.jpg?version=1545401624 "Radio Button Big Square [Just CSS]")
| Author: | Gabriel Ferreira |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | November 11, 2016 |
CSS Radio Buttons
| Author: | Tristan White |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | December 5, 2016 |
Hidden Radio Messages/Tooltips
| Author: | Joshua Ward |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | December 28, 2016 |
Custom Radio Buttons
| Author: | Dronca Raul |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | March 23, 2017 |
Toggle radio intput with the label
| Author: | Andrew Vereshchak |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | August 3, 2017 |
Custom Radio Buttons Survey
| Author: | Tobias Bogliolo |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | June 25, 2017 |
Input Radio
| Author: | Andreas Storm |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | November 21, 2017 |
Liquid Radio Button using SVG and GSAP (GreenSock)
| Author: | Ryan LaBar |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | June 2, 2017 |
Smile Toggle | HTML + CSS
| Author: | Cameron Fitzwilliam |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | January 15, 2018 |
Slap Toggle
| Author: | Yariv Fruend |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | January 6, 2018 |
macOS Mojave dark mode checkbox & radio buttons
| Author: | Andreas Storm |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | June 13, 2018 |
Fancy Checkboxes and Radio Buttons — with Font Awesome
| Author: | Jase |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | August 23, 2018 |
Radio Button Dot-Slider (Pure CSS)
| Author: | Brandon McConnell |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | October 22, 2018 |
Get Fit
| Author: | Brandon McConnell |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | March 27, 2019 |
Checkboxes and radios (dark/light) – pure css – #06
| Author: | Ivan Grozdic |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | April 9, 2019 |
Recreation: Card theme switcher
| Author: | Dean |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | April 28, 2019 |
Radio Buttons With Marble and Wood
| Author: | Jon Kantner |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | February 11, 2020 |
CSS Only: Custom Radio Buttons
| Author: | Abubaker Saeed |
| Made with: | HTML / CSS / JS |
| Link: | Source code/Demo |
| Create on: | January 22, 2020 |
