Top 30+ CSS Radio Button Styles - csshint

Collection of HTML and CSS custom radio buttons.

1.Styling radio buttons

See the Pen <a href='https://codepen.io/Luxplanjay/pen/mWNXVy/'>Styling radio buttons</a> by Alexander Repeta (<a href='https://codepen.io/Luxplanjay'>@Luxplanjay</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Alexander Repeta

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

2.Radio Button using SVG and GSAP

See the Pen <a href='https://codepen.io/ryan_labar/pen/PjYMvW/'>Liquid Radio Button using SVG and GSAP (GreenSock) </a> by Ryan LaBar (<a href='https://codepen.io/ryan_labar'>@ryan_labar</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Ryan LaBar

Made with

HTML / CSS(SCSS) / Js

demo and code Get Hosting

3.Custom Radio Buttons

See the Pen <a href='https://codepen.io/rauldronca/pen/EWLeMz/'>Custom Radio Buttons</a> by Dronca Raul (<a href='https://codepen.io/rauldronca'>@rauldronca</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Dronca Raul

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

4.Jelly Radio Button

See the Pen <a href='https://codepen.io/tomma5o/pen/grJyzL/'>Jelly Radio Button</a> by Tommaso Poletti (<a href='https://codepen.io/tomma5o'>@tomma5o</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Tommaso Poletti

Made with

HTML / CSS

demo and code Get Hosting

5.Ripple animation radio and Checkbox

See the Pen <a href='https://codepen.io/wilder_taype/pen/pNXwMW/'>Ripple animation on input type radio and Checkbox</a> by WILDER TAYPE (<a href='https://codepen.io/wilder_taype'>@wilder_taype</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

WILDER TAYPE

Made with

HTML / CSS

demo and code Get Hosting

6.Radio Group using labels

See the Pen <a href='https://codepen.io/skeddles/pen/PbROLK/'>Radio Group using labels</a> by skeddles (<a href='https://codepen.io/skeddles'>@skeddles</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

skeddles

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

7.Animated radio switches

See the Pen <a href='https://codepen.io/koljakutschera/pen/YGvwGB/'>Animated CSS-only checkbox and radio switches</a> by Kolja Kutschera (<a href='https://codepen.io/koljakutschera'>@koljakutschera</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Kolja Kutschera

Made with

HTML / CSS(Less)

demo and code Get Hosting

8.Radio Selects: Flexbox and Fun

See the Pen <a href='https://codepen.io/adamstuartclark/pen/pbYVYR/'>Radio Selects: Flexbox and Fun</a> by Adam Clark (<a href='https://codepen.io/adamstuartclark'>@adamstuartclark</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Adam Clark

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

9.SVG Splat Radio Buttons

See the Pen <a href='https://codepen.io/chrisgannon/pen/BoXLOJ/'>SVG Splat Radio Buttons</a> by Chris Gannon (<a href='https://codepen.io/chrisgannon'>@chrisgannon</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Chris Gannon

Made with

HTML / CSS / JS

demo and code Get Hosting

10.Radio Buttons

See the Pen <a href='https://codepen.io/imtoobose/pen/zqjgry/'>Radio Buttons</a> by Saumitra Bose (<a href='https://codepen.io/imtoobose'>@imtoobose</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Saumitra Bose

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

11.Input & Radio-button

See the Pen <a href='https://codepen.io/opheliafl/pen/LGKMNL/'>Input & Radio-button</a> by Ophelia Fournier-Laflamme (<a href='https://codepen.io/opheliafl'>@opheliafl</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Ophelia Fournier-Laflamme

Made with

HTML / CSS(Post css)

demo and code Get Hosting

12.simple radio buttons

See the Pen <a href='https://codepen.io/pamdayne/pen/jqxYBx/'>Just very simple radio buttons</a> by Pamela Dayne (<a href='https://codepen.io/pamdayne'>@pamdayne</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Pamela Dayne

Made with

HTML / CSS

demo and code Get Hosting

13.Animated switch for radio buttons

See the Pen <a href='https://codepen.io/fredjens/pen/adqLNO/'>Animated switch for radio buttons (css only)</a> by Fredrik Jensen (<a href='https://codepen.io/fredjens'>@fredjens</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Fredrik Jensen

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

14.Material Radio Button

See the Pen <a href='https://codepen.io/montechristos/pen/EPvOwJ/'>Material Radio Button</a> by CODEARMADA (<a href='https://codepen.io/montechristos'>@montechristos</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

CODEARMADA

Made with

HTML / CSS(SCSS) / JS

demo and code Get Hosting

15.Material Design – Radio Button CSS

See the Pen <a href='https://codepen.io/lorenzodianni/pen/ByXMYB/'>Material Design – Radio Button CSS [SCSS]</a> by Lorenzo D’Ianni (<a href='https://codepen.io/lorenzodianni'>@lorenzodianni</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Lorenzo D’Ianni

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

16.Stylish radio buttons – CSS only

See the Pen <a href='https://codepen.io/yunntan/pen/rayKjK/'>Stylish radio buttons – CSS only</a> by Simon Buisson (<a href='https://codepen.io/yunntan'>@yunntan</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Simon Buisson

Made with

HTML / CSS(Less)

demo and code Get Hosting

17.CSS radio buttons

See the Pen <a href='https://codepen.io/AngelaVelasquez/pen/Eypnq/'>CSS radio buttons</a> by Angela Velasquez (<a href='https://codepen.io/AngelaVelasquez'>@AngelaVelasquez</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Angela Velasquez

Made with

HTML / CSS

demo and code Get Hosting

18.Radio input

See the Pen <a href='https://codepen.io/havardob/pen/zqjqrq/'>Daily UI #02 | Radio input</a> by Håvard Brynjulfsen (<a href='https://codepen.io/havardob'>@havardob</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Håvard Brynjulfsen

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

19.Flat Radio – Yes/No

See the Pen <a href='https://codepen.io/mblode/pen/gGIAm/'>Flat Radio – Yes/No</a> by Matthew Blode (<a href='https://codepen.io/mblode'>@mblode</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Matthew Blode

Made with

HTML(Pug) / CSS(SCSS)

demo and code Get Hosting

20.Radio checked style

See the Pen <a href='https://codepen.io/l4ci/pen/zAiws/'>Radio checked style</a> by Volker Otto (<a href='https://codepen.io/l4ci'>@l4ci</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Volker Otto

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

21.Balloon Radio Buttons

Author

Chris Simari

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

22.Simple Radio Group

See the Pen <a href='https://codepen.io/ig0ramad0/pen/tszLC/'>Simple Radio Group</a> by Igor Amado (<a href='https://codepen.io/ig0ramad0'>@ig0ramad0</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Igor Amado

Made with

HTML(Haml) / CSS(Sass)

demo and code Get Hosting

23.Radio Buttons Interaction

See the Pen <a href='https://codepen.io/rauldronca/pen/VBBJMy/'>Radio Buttons Interaction ✨</a> by Dronca Raul (<a href='https://codepen.io/rauldronca'>@rauldronca</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Dronca Raul

Made with

HTML / CSS

demo and code Get Hosting

24.Mobile Radio Buttons with small animation

See the Pen <a href='https://codepen.io/Benny29390/pen/EdEmoj/'>Mobile Radio Buttons with small animation</a> by Benjamin Koehler (<a href='https://codepen.io/Benny29390'>@Benny29390</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Benjamin Koehler

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

25.Underground radios

See the Pen <a href='https://codepen.io/ainalem/pen/QzogPe/'>Underground radios</a> by Mikael Ainalem (<a href='https://codepen.io/ainalem'>@ainalem</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Mikael Ainalem

Made with

HTML / CSS

demo and code Get Hosting

26.checkbox & radio buttons

See the Pen <a href='https://codepen.io/andreasstorm/pen/JZJLad/'>macOS Mojave dark mode checkbox & radio buttons</a> by Andreas Storm (<a href='https://codepen.io/andreasstorm'>@andreasstorm</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Andreas Storm

Made with

HTML / CSS(Stylus)

demo and code Get Hosting

27.Material Design Radio Buttons

See the Pen <a href='https://codepen.io/andreasstorm/pen/jxjKGj/'>Material Design Radio Buttons</a> by Andreas Storm (<a href='https://codepen.io/andreasstorm'>@andreasstorm</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Andreas Storm

Made with

HTML / CSS(Stylus)

demo and code Get Hosting

28.Smile Toggle | HTML + CSS

See the Pen <a href='https://codepen.io/CameronFitzwilliam/pen/RxYbgg/'>Smile Toggle | HTML + CSS</a> by Cameron Fitzwilliam (<a href='https://codepen.io/CameronFitzwilliam'>@CameronFitzwilliam</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Cameron Fitzwilliam

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

29.SVG Radio Selector Buttons

See the Pen <a href='https://codepen.io/nikkipantony/pen/wpPGZp/'>Pure CSS – SVG Radio Selector Buttons</a> by Nikki Pantony (<a href='https://codepen.io/nikkipantony'>@nikkipantony</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Nikki Pantony

Made with

HTML / CSS

demo and code Get Hosting

30.Slap Toggle

See the Pen <a href='https://codepen.io/YarivFrd/pen/PEOJLj/'>Slap Toggle</a> by Yariv Fruend (<a href='https://codepen.io/YarivFrd'>@YarivFrd</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Yariv Fruend

Made with

HTML / CSS / JS

demo and code Get Hosting

31.Material Checkboxes and Radio buttons

See the Pen <a href='https://codepen.io/BuddyLReno/pen/boGRPO/'>Material Inspired Checkboxes and Radio Groups</a> by Buddy Reno (<a href='https://codepen.io/BuddyLReno'>@BuddyLReno</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Buddy Reno

Made with

HTML / CSS(SCSS)

demo and code Get Hosting