70+ CSS Custom Radio Button

CSS Custom Radio Button – Are you looking for CSS based Custom Radio Button, If yes then in this post I am going to share hand-picked CSS Custom Radio Button for you. You can use these Custom Radio Button in your next web based projects to make your project more dynamic and awesome.

Fancy Checkboxes and Radio Buttons

Fancy Checkboxes and Radio Buttons

Fancy Checkboxes and Radio Buttons script made with HTML / CSS (SCSS) and written By jasesmith.



Responsive Toggle Switch

Responsive Toggle Switch

Responsive Toggle Switch script made with HTML CSS/SCSS and written By dsenneff.



Checkbox & Radio Buttons

Checkbox & Radio Buttons

Checkbox & Radio Buttons script made with HTML / CSS (Stylus) and written By andreasstorm.



Slap Toggle

Slap Toggle

Slap Toggle script made with HTML CSS JavaScript and written By YarivFrd.


Alignment Radio Buttons

Alignment Radio Buttons

Alignment Radio Buttons script made with HTML (Pug) / CSS (SCSS) and written By Rplus.


Wobble Radio Buttons

Wobble Radio Buttons

Wobble Radio Buttons script made with HTML / CSS / JavaScript and written By Zaku.


Radio Input

Radio Input

Radio Input script made with HTML / CSS (SCSS) and written By aaroniker.


Underground Radio Buttons

Underground Radio Buttons

Underground Radio Buttons script made with HTML / CSS and written By ainalem.


Material Design Radio Buttons

Material Design Radio Buttons

Material Design Radio Buttons script made with HTML / CSS (Stylus) and written By andreasstorm.


Input Radio

Input Radio

Input Radio script made with HTML CSS/Sass and written By andreasstorm.



☑️ Transform Toggles, will-change ☑️

☑️ Transform Toggles, will-change ☑️

☑️ Transform Toggles, will-change ☑️ script made with HTML / CSS (Less) and written By shshaw.


Pure CSS-SVG Radio Selector Buttons

Pure CSS-SVG Radio Selector Buttons

Pure CSS-SVG Radio Selector Buttons script made with HTML CSS and written By nikkipantony.


Mobile Radio Buttons with Small Animation

Mobile Radio Buttons with Small Animation

Mobile Radio Buttons with Small Animation script made with HTML / CSS (SCSS) and written By Benny29390.


Material Inspired Radio Groups

Material Inspired Radio Groups

Material Inspired Radio Groups script made with HTML CSS/SCSS and written By BuddyLReno.


Radio Buttons Interaction

Radio Buttons Interaction

Radio Buttons Interaction script made with HTML / CSS and written By rauldronca.


Smile Toggle (HTML + CSS)

Smile Toggle (HTML + CSS)

Smile Toggle (HTML + CSS) script made with HTML CSS/SCSS and written By CameronFitzwilliam.


CSS radio buttons DEMO

  CSS radio buttons

A CSS Trick to style a radio button . Resource: http://css-tricks.com/almanac/selectors/c/checked/ – By AngelaVelasquez


CSS only Custom Radio Buttons DEMO

  CSS only Custom Radio Buttons

Based on the webdesign tuts+ article (link below) but instead of using images I used only css. http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/ – By mitchmcccline


CSS Radio Buttons DEMO

  CSS Radio Buttons

A simple and elegant CSS radio button – By triss90



Completely CSS: Custom checkboxes, radio buttons and select boxes DEMO

  Completely CSS: Custom checkboxes, radio buttons and select boxes

CodePen demo for: http://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes – By KenanYusuf


CSS Star Ratings with Radio Buttons DEMO

  CSS Star Ratings with Radio Buttons

Replaces radio button group with filled in stars. This allows you to use a normal radio button form and simply submit the selected value. – By lsirivong


Gooey radio buttons DEMO

  Gooey radio buttons

Gooey wobbly radio buttons – By ainalem


Swappy radios DEMO

  Swappy radios

An elaborate radio button animation – By liamj


Custom checkbox and radio button DEMO

  Custom checkbox and radio button

Custom checkbox and radio button that really works. You also may like Custom checkbox and radio button that really works v2 . – By elmahdim



Touch Friendly Bootstrap Radio buttons and Checkboxes DEMO

  Touch Friendly Bootstrap Radio buttons and Checkboxes

This uses standard radio buttons and checkboxes, but adds font icons for flexibility in considering touch devices that need a larger area. One can touch the icon or the label to select. This method places two different icons in the HTML, and just shows or hides the proper icon based on selection. – By BrianSassaman


Radio Button Images Demo DEMO

  Radio Button Images Demo

Option image example for: http://stackoverflow.com/questions/3896156/how-do-i-style-radio-buttons-with-images-laughing-smiley-for-good-sad-smiley – By DavidBradbury


Slidey radios (swappy radios remix) DEMO

  Slidey radios (swappy radios remix)

A less-weird-but-still-weird remix of ‘Swappy radios’ – By liamj


CSS Radio Buttons and Checkboxes: Custom icon DEMO

  CSS Radio Buttons and Checkboxes: Custom icon

Checkboxes and radio buttons with a custom font icon. Works cross browser on modern browsers. – By imohkay


Form with SVG radio buttons DEMO

  Form with SVG radio buttons

I made this pen to practice writing more semantic and accesible html. I previously made a pen about: CSS radio buttons. So because of that, I think a form could be a great start for me to practice and learn how to write better HTML. – By AngelaVelasquez


radio click through #2 DEMO

  radio click through #2

playing around with radios to create something like a very simple css based slideshow/click through box. all images from dribbble. – By Hornebom


Pure CSS Fancy Checkbox/Radio DEMO

  Pure CSS Fancy Checkbox/Radio

A Fancy Checkbox/Radio buttons with small transition, enjoy it! – By raubaca



Custom checkboxes / radio buttons #1 DEMO

  Custom checkboxes / radio buttons #1

First example of some simple custom checkboxes and radio buttons made with pure (s)css. These only work in chrome, but fallback to the native ones in other browsers. – By Sambego


Animated Radio Inputs DEMO

  Animated Radio Inputs

The bi-directional animation is done by using ~ sibling selectors. ps. WebKit only -> uses appearance:none; – By simurai


Radio button toggle switch DEMO

  Radio button toggle switch

Display standard html radio buttons as toggle buttons. Full blog post: https://thestizmedia.com/radio-buttons-as-toggle-buttons-with-css/ – By JiveDig


Smart checkbox and radio DEMO

  Smart checkbox and radio

自定义radio buttonçš„æ ·å¼ – By jcpplus


Pure CSS Option ( radio & checkbox ) No JS DEMO

  Pure CSS Option ( radio & checkbox ) No JS

pure css option with native radio and checkbox – By Aoyue



CSS Radio Buttons and Checkboxes: Border DEMO

  CSS Radio Buttons and Checkboxes: Border

Checkboxes and radio buttons with a border checked state via an inset box shadow. Works cross browser on modern browsers. – By imohkay


Pure CSS Radio Button Tiles DEMO

  Pure CSS Radio Button Tiles

A visual card-based alternative to traditional radio inputs – no JS required. Accessible, cross-browser compatible, and mobile-friendly. – By caseycallow


Material Radio Input DEMO

  Material Radio Input

Custom radio inputs I built for work, inspired by Google’s Material Design. CSS only. – By jchristianhall


Quick Tip: Easy CSS3 Checkboxes and Radio Buttons DEMO

  Quick Tip: Easy CSS3 Checkboxes and Radio Buttons

Tutorial from the archives, published in October 2012. – By tutsplus


Google Dots Radio Buttons DEMO

  Google Dots Radio Buttons

4 different ways to easily customize radio buttons. Inspiration: design.google.com/articles/evolving-the-google-identity/ – By victorfreire


Show hide div on radio button DEMO

  Show hide div on radio button

This is a requirement very common in big data forms to fill-up. For those non-professional programmers, a handy minimal version. – By dhanushbadge



CSS only input radio select concept DEMO

  CSS only input radio select concept

Testing out some input radio selecting concept with an animated slide to whow which one is selected. – By web-tiki


Radio Selection DEMO

  Radio Selection

Sample JqueryUI based Radio button Selection with custom styling using unordered list – By usmani87


Material Design Radio Button CSS only DEMO

  Material Design Radio Button CSS only

Simple CSS implementation of a material design radio button. Tested in Chrome, Safari, Internet Explorer 11 and Firefox. – By hansmaad


Jelly Radio Button DEMO

  Jelly Radio Button

Sticky Radio Button Enjoy this flat and simple styling of radio button in only vanilla CSS 🙂 – By tomma5o


Styling checkboxes and radio buttons with CSS DEMO

  Styling checkboxes and radio buttons with CSS

This pen shows how to style checkboxes and radio buttons with plain CSS. Please check out the tutorial at http://www.8bit-code.com/article/styling-checkboxes-and-radio-buttons-with-css – By 8bitcode



Ripple animation on input type radio and Checkbox DEMO

  Ripple animation on input type radio and Checkbox

Ripple animation on input type radio and Checkbox . more info https://goo.gl/VoFJrw – By wilder_taype


radio click through DEMO

  radio click through

playing around with radios to create something like a very simple css based slideshow/click through box – By Hornebom


Sliding radio buttons DEMO

  Sliding radio buttons

Only CSS sliding radio buttons – By oggyindahouse


Radio Button DEMO

  Radio Button

– By andreasstorm


Checkboxes and Radio Buttons with SVG DEMO

  Checkboxes and Radio Buttons with SVG

Checkboxes and Radio Buttons with SVG by twitter/@crnacura Article: http://tympanus.net/codrops/2013/10/15/animated-checkboxes-and-radio-buttons-with-svg/ – By felipekm


Animated switch for radio buttons (css only) DEMO

  Animated switch for radio buttons (css only)

Animated switch build with radio buttons. – By fredjens


jQuery Validate – Radio button example DEMO

  jQuery Validate - Radio button example

– By prasanthmj



Radio and Checkbox Styles DEMO

  Radio and Checkbox Styles

Simple shape styles for radio and checkbox buttons – By MatthewShields


Material Design – Radio Button CSS [SCSS] DEMO

  Material Design - Radio Button CSS [SCSS]

A simple input radio style. Sass is the way! – By lorenzodianni


AngularJS Checkbox vs. Radio Buttons for boolean data DEMO

  AngularJS Checkbox vs. Radio Buttons for boolean data

AngularJS Checkbox vs. Radio Buttons for boolean data – By paulbhartzog


Bouncy Radio Buttons! DEMO

  Bouncy Radio Buttons!

Originally forked from Bennett Feely’s Fluid Radio Buttons: http://codepen.io/bennettfeely/pen/Bmzeg – By jringenberg


ATC Vintage Radio Flip Clock DEMO

  ATC Vintage Radio Flip Clock

Inspired by this shot: https://dribbble.com/shots/2236793-Vintage-Flip-Clock I decided to add a radio button because I love any excuse to use some old timey radio – By tstoik



Google maps radio buttons CSS only DEMO

  Google maps radio buttons CSS only

Radio buttons that are styled as actual buttons. CSS only. – By eliasmeire


CSS: Radio Input Stars DEMO

  CSS: Radio Input Stars

Styling rating stars with radio inputs. My No JS Collection – By jakealbaugh


Accessible & Skeuomorphic Checkbox/Radio jQuery plugin DEMO

  Accessible & Skeuomorphic Checkbox/Radio jQuery plugin

Yeh Yeh, I know they’ve been done to death. 😛 There’s a little jquery helper/plugin to go along with these. – By simeydotme


Radio & Select Element Replacement Demo DEMO

  Radio & Select Element Replacement Demo

A demo showing some radio box and select element replacement I did recently on a project for Supereight Studio. – By blucube


I Hope you liked Hand-picked list of Custom Radio Button, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked HTML and CSS code examples, tutorials and articles.