Styling Radio Buttons with CSS (59 Custom Examples)

Radio buttons are website elements that allow a user to select one out of a series of options. They are very similar to checkboxes. The difference is that checkboxes are not limited to one choice. With radio buttons, when a user tries to select more than one option, the previous choice is deselected.

Actual radio buttons were the inspiration for the term ‘radio button’. Older radio sets had buttons that would pop out when another one was pressed.

To find specific buttons to match the style of a website, CodePen is a great place to start. This article created by our team behind Slider Revolution, provides styling radio buttons snippets that you can use in your projects.

CSS Radio Buttons

The first pick is a classic and straightforward design by Tristan White. The style, font, and background color are very simple, but it has all basic functionalities. The entire clean code is available in CSS and HTML, but not in JS.

The buttons are available in three variations. When selected, the button is highlighted with a fill color.

A disabled style radio button is also included. It is very responsive and works well on any screen size, from desktops to mobile devices.

Pure CSS – SVG Radio Selector Buttons

This styling of radio buttons was pen-built by Nikki Pantony. It is available in CSS and SVG. JS is not needed.

Project Management Triangle Selector

Jhey built the Project Management Triangle Selector.

In this iteration, users can select two out of three options. It will completely reset if users attempt to also select the third option. This principle is extendible to multiple options.

Radio Buttons With Marble and Wood

These buttons, by Jon Kantner,  use a different styling. The animated selector appears like Chinese checkers on a wooden board.

CSS Radio-Button

CSS Radio-button by 147th are CSS radio buttons. They stand out due to their different styling.

As background, the developer used a card table design to place the buttons on. The functioning of the buttons is very simple. The site visitor can select only one button at a time.

The whole design focuses attention on the animated buttons.

The code avoids the use of JS and is instead written in advanced CSS and HTML. Because of this, the template is easier to understand and work with.

The link above shows the code and gives more information.

Google Dots Radio Buttons

Google Dots Radio Buttons provides four ways to customize the radio buttons. The developer of this set of buttons is Victor Freire.

The selection of one of the buttons is highlighted with the usual white filling. But what makes these buttons so special is the animation. Each of the buttons bounces up and down rhythmically.

This will definitely get the attention of visitors. When a user clicks on their preferred option, the filling of the buttons is animated. The selected button will also stop moving.

Custom SCSS3 Radio Button – Radiosplosion

Designed and developed by Sodapop.

This is not a standard radio button. The design and animation add something extra. Click the link for a demo.

Custom Checkboxes/Radio Buttons

Besides a selection of CSS checkboxes, Sam offers a set of radio buttons. The CSS buttons only work in Chrome, but the original ones work in other browsers.

HTML Radio Buttons

These HTML buttons, made by Saumitra Bose, fulfill their basic purpose. By clicking one of the radio buttons a window opens with additional information.

Responsive Toggle Switch

As the name indicates, this element is responsive. This allows it to work on any device or platform.

A different take on the radio switch, designed by Darin. It is simple but adds a creative touch to a website.

It works like a switch, with two positions. The switch shows the available choices and adjusts to the text length. By choosing one, the other choice is deselected.

Nerf Gun Radio Button

This at first looks like one of the many other radio button options that are out there. But the selection animation makes this design by Olivia Ng very special. It will make any website stand out.

NEUMORPHIC RADIO

Halvves developed this set of buttons. A change to the shading shows the selected option. A simple and stylish design.

Slap Toggle

By Yariv Fruend. The slap toggle is another variation on the CSS radio button.

Upon clicking one of the options, the color immediately changes. It is a more complex and creative alternative to the simple toggling between options.

The animation likewise provides a visual indication of selection change. A “slap-and-jump” effect makes it more entertaining and attractive to look at. It will keep site visitors entertained.

Smile Toggle

A variation on the radio button, designed by Cameron Fitzwilliam. It stands out as different and is fun to look at and fun to use.

It is an animated mood indicator. The switch is a smiley face that slides to the ‘fun’ or the ‘bad’ side. Depending on the selected side, the appearance of the smiley changes.

When it is on the ‘bad’ side, it is grey and not cheerful. But when the slider is moved to the ‘fun’ side, the color changes to blue and the face starts to smile.

To give feedback, a radio button can be a bit boring. But this ‘mood-o-meter’ makes things fun and engaging. As a result, you will be more likely to receive feedback.

Balloon Radio Buttons

Chris Simari added some skins to the radio buttons. This gives them a different and more interesting look.

UI // Radio Button

The UI radio button is a series of buttons with added animation, to give an extra touch. Designed by Cosimo Scarpa.

Radio Hopping

In these animated buttons by Jon Kantner, the selection dot hops from one selection to the next.

Custom Radio Button Survey

These CSS buttons are suitable for in-depth surveys. The innovator behind them, Tobias Bogliolo, made these radio buttons to add creativity to a website. Adding these elements will impress visitors.

It allows the displaying of various questions, with multiple answers to choose from. This is a good option for polls, reviews, and surveys. The styling of the radio buttons is advanced and responsive.

Radio Selects: Flexbox & Fun

Radio Selects is a work in progress by Adam Clark. The interface and look of these CSS radio buttons are reminiscent of many games.

So this example is useful for an app and game developer. Many corporate sites also use this style. Clients can click them to indicate what kind of service they are looking for.

Each box offers a different choice. When selected, its color changes and a  checkmark appears above the box. The code allows the user to change various details and can be added to a website.

Radio Button Dot-Slider

Brandon McConnell created this range slider. Lines connect the options and changing the selection moves the indicator dot along. It works well to indicate ranges.

This option does not use JS, so it is a good choice for JS-restricted sites.

Radio Button List

Next to the list of options is a slider. Users control the slider by hovering and clicking with the mouse. This radio buttons variant is written in CSS3.

2 Elements 1 Styled Radio

Simple and no-nonsense animated and styled radio buttons, by Tobias HarisonDenby. Written in HTML and CSS only with no JS required.

Pill Styled Radio Buttons

Radio buttons with a clear, large font, developed by Havard Brynjulfsen. It uses CSS only (SCSS) and employs sibling selectors and the: checked pseudo-class.

Animated Switch for Radio Button

Fredrik Jensen made this clear and attractive animated CSS radio button. The design gives the user much to customize.

An animated sphere indicates which of the boxes is selected. A moving sphere and a color change show the selection change. The visual effects are simple but pleasing and will add a creative touch to any site.

2020 Toggles

Aaron Iker offers his set of radio buttons. It also includes switches and a CSS checkbox set. If needed, the deactivated versions, shaded in grey, are also available.

Custom Radio Buttons

These radio buttons do not use the standard filled circle design. Instead, Dronca Raul made customizable buttons that indicate selection with a tick mark. Only depends on CSS.

Radio Button Big Square

A styled radio button that uses text-filled boxes as buttons. A color change and a little symbol show the selected choice. Made by Gabriel Ferreira.

Radio Color Picker

Designed by The Bearded Wonder.

These radio buttons do not offer a specific text choice but only a color block. They are therefore different from the ones discussed so far. This design is very useful when offering color options. The code for these buttons was written in CSS and HTML and without dependency on JS. They work well on any device and are easy to replicate. Using them saves a lot of time and effort.

Check the link to learn more about the buttons, the code, and the developer.

Awesome Toggle Button

Made by Andrew, these buttons are toggle switches. It features animated selection changes. A change in color and an icon also indicates the selection.

Pure CSS Option

A radio design that immediately attracts attention. It uses large colorful boxes.

Subtle changes in shading show the selected choice. The design allows the activation of alerts which also confirm the choice.

Aron wrote the pure CSS Options.

Bulgy Radios

Liam used JS in his code for Bulgy Radios. The animations for the change of selection are flashy and elaborate.

Snacks? Flat radio button inputs…

These styled radio buttons are simple and clear. They are controllable with the mouse or with the keyboard.

Jelly Radio Button

Tomasso Poletti made this simple and cheerful button. He only used Vanilla CSS to write the code.

Ripple Animation On Input Type Radio And Checkbox

Radio button and checkbox with ripple animation, made by Wilder Taype.

Flat Radio – Yes/No

Made by Matthew Blode.

A Yes/No button that is similar to “Styled Radio Buttons” by Nate Wiley. As the name suggests these buttons are flat. The $red, $blue, and $green button colors are adjustable.

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

Custom radio buttons, select boxes, and checkboxes by Kenan Yusuf.

Recreation: Card Theme Switcher

Designed by Dean Hidri, these radio buttons have a credit card theme. Each button offers the choice of a different color. A gratifying animation accompanies a selection change.

Toggle Radio Input With The Label

The toggle radio buttons by Andrew Vereshchak use HTML, CSS, and JS. The buttons are plain, but the added advantage is that there are multiple ones.

Sometimes one question is not enough. This option features two similar boxes side by side.

Because their appearance is simple they are not distracting. The viewer keeps their focus on filling out the boxes. Each box contains a set of options that the user can select, one from each box.

Animated SVG Radio Buttons

The animated SVG radio buttons, by Andrej Sharapov, use CSS. A selection produces the expected filled buttons and a clear color change.

Just Very Simple Radio Buttons

The most basic of radio buttons answers exactly to the definition. Although basic, they are most effective too. They were designed and developed by Pamela Dayne.

Before selecting anything, all the buttons look the same. But after clicking one, an animated change in appearance occurs. This change happens again if the user changes their selection.

The developer chose to use the simplest and cleanest HTML and CSS code. So, using it is very simple. It can be copied and pasted into any website.

Liquid Radio Button Using SVG and GSAP

This SVG animated button by Ryan LaBar is special and stylish. The animation is likewise elegant and works well.

The change in the status of an option is graphically shown by a big drop falling in the middle of the button. When the option is deselected, the button filling splashes and disperses away.

This design is ideal to keep the buttons simple, but engaging. Users will be very pleased and entertained making their selection.

Radio Input

A stylish and clean option, by Håvard Brynjulfsen. It makes use of the: checked pseudo-class.

Underground radios

A radio button with traveling underground as its theme. Made by Mikael Ainalem.

Liquid Radio Button

A set of buttons that are similar to the Liquid Radio Buttons by Ryan LaBar. These buttons, by Tamino Martinius, use similar animations. The code is in plain CSS.

Strikethrough Radios

An experimental option inspired by radio buttons. This design by Ed Hicks uses animated strikethrough of part of a sentence.

Material Radio Button

CODEARMADA is the designer behind this radio button design. Both CSS and JS were used to reach the desired effects.

The liquid animation when the switch is changed is impeccable. It shows selection with a sphere without covering the selection. This leaves the icon visible.

Input Radio HTML

Styling radio buttons designed by Andreas Storm. Selection is followed by a loading animation of the border and filling.

CSS Only Input Radio Select Concept

Produced by web-tiki.

This example shows what can be achieved with simple animation. The different buttons are horizontal, with a dotted circle showing the current selection. An animated sliding button lands on the selection.

CSS Styling Radio Button

When hovering over an option it is highlighted with eye-catching color. Angela Velasquez came up with the idea for this stylish design.

Google Maps Radio Button

Made using HTML and CSS, which has the advantage of fast loading times. It utilizes Google Maps icons for driving, walking, or cycling. So they work well in conjunction with a custom map or location tracker.

When hovering over the icons, the tooltip gives extra clarity to the meaning of the pictures. It’s possible to replace the given images with the users’ own. The selection is highlighted with a sphere or different color.

Pure CSS Fancy Checkbox/Radio

Raúl Barrera created these buttons. Fancy and flexible radio buttons and checkboxes. The HTML and CSS codes are simple and short.

Fancy checkboxes and radio buttons

Fancy-looking CSS radio boxes and checkboxes, made by Jase. Customizable and made with the font Awesome.

Checkout Form

Rosa designed these checkout styled radio buttons. Three sets of buttons are in the link.

Radio Button Styling

CSS and HTML radio buttons styled by Morten Olsen.

Radio Button Circuit

LukasOe made these circuit selector themed HTML and CSS radio buttons. This design will definitely attract the viewer’s attention.

Checkbox & Radio Buttons

A dark mode macOS theme checkbox and radio buttons. A simple design, created by Andreas Storm.

Input & Radio Button

Ophelia Fournier-Laflamme made this one. This design uses a spherical outline around the button to indicate selection. Made with HTML and CSS.

FAQs about radio buttons

1. What are radio buttons and how do they work?

One option from a list of possibilities can be chosen by users using radio buttons, a form of input element in HTML. Every other radio button in the same group is deselected when a user clicks on one radio button, which selects it. For picking a single option, such as the gender or preferred payment method, radio buttons are frequently used in forms.

2. How do radio buttons differ from checkboxes?

The primary distinction between radio buttons and checkboxes is that checkboxes allow the user to select many alternatives, whereas radio buttons only allow the user to select one option from a group. Checkboxes are used when a user can select one or more alternatives, whereas radio buttons are often used when a user can only select one.

3. How many radio buttons can I include in a group?

There is no restriction on how many radio buttons can be present in a group. To prevent confusing the user with too many options, it’s crucial to think about the form’s usability. Also, it’s a good idea to categorize and arrange together related options in groups.

4. Can I make multiple radio button groups on a single page?

On a single page, you may create numerous radio button groups, yes. To set each group from from the others, each must have a distinctive name attribute. It’s crucial to make sure that each radio button group is labeled appropriately and that they may be visually distinguished.

5. How do I pre-select a radio button option?

The checked element in HTML can be used to pick a radio button choice in advance. You can pre-select a radio button by setting the checked attribute to “checked” on that button. As an alternative, you can use JavaScript to dynamically set the checked attribute depending on user input or other circumstances.

6. Can I make a radio button option required?

Sure, you may use HTML’s needed attribute to make a radio button option necessary. A radio button group’s required property must be set to “required” in order to require the user to select one choice before submitting the form.

7. Can I style the appearance of radio buttons?

Absolutely, you can use CSS to style the way radio buttons look. Nevertheless, due to issues with browser compatibility and accessibility, the stylistic possibilities are constrained. It’s crucial to make sure that the design doesn’t affect how easily or conveniently the radio buttons can be accessed.

8. How can I use JavaScript to manipulate radio buttons?

By using the document object to gain access to the DOM elements and dynamically set their properties, JavaScript may be used to manipulate radio buttons. The checked property, for instance, can be used to check or uncheck a radio button in response to user input or other circumstances.

9. Are radio buttons accessible for users with disabilities?

Absolutely, persons with disabilities can utilize radio buttons. However it’s crucial to make sure the radio buttons are labeled legibly using the label element and that the form is made accessible for people with various disabilities, such as using ARIA attributes and offering alternative text for images.

10. How do radio buttons impact website or application usability and user experience?

By giving consumers a simple and easy way to make decisions, radio buttons can improve the usability and user experience of a website or application. To make radio buttons simple to use and understand, it’s crucial to take into account their positioning, grouping, and labeling. Also, the radio button layout should complement the application’s or website’s overall appearance.

Ending thoughts on styling radio buttons with CSS

Radio buttons are elements on many websites. It is normal to see them in use on pages where the completion of forms is necessary.

Users in these instances can select just one option out of many. If they try to select multiple answers, the first selection is undone.

In the past radio buttons were a functional thing only. The default buttons are now considered too boring and not very engaging.

More recently, designers have started using this element as something that can add style or a personal touch to a website. For this reason, the styling of CSS radio buttons is becoming more popular.

However, a word of caution. Radio buttons should be used for the right purpose.

With the enhancing possibilities of CSS, the user can see what has been selected. This prevents the giving and receiving of incorrect data.

If you liked this article about styling radio buttons, you should check out this one with CSS timeline examples.

We also wrote about similar topics like CSS gallery examples, HTML calendar snippets, image sliders for e-commerce, product carousels for e-commerce, CSS input text examples, CSS accordion, CSS animated background, and CSS animation examples.