In this guide, you’ll learn how to create a Pure CSS Radio Button using only HTML and CSS. You’ll also discover how to customize its design and ensure accessibility using best practices. By the end, you’ll have a modern, stylish, and interactive radio-switch component that works seamlessly across browsers.
Radio buttons are essential interface elements that allow users to choose a single option from a set. While similar to checkboxes, radio buttons differ by restricting the user to just one selection at a time—selecting a new option automatically deselects the previous one.
Let’s begin building this clean and functional radio button step by step.
Project Introduction to pure CSS radio button
Our goal is to design a visually appealing switch-style radio button using pure HTML and CSS. You won’t need JavaScript for this tutorial. The interface will display two options—Yes and No—with a sliding indicator that changes based on the selected radio input.
Prerequisites
Before starting, make sure you are familiar with basic HTML and CSS concepts. You will also need a code editor such as VS Code, Sublime Text, or any editor of your choice to create and save your project files.
Step 1: HTML Structure
Start by creating an HTML file. Inside it, we define two radio buttons that share the same name attribute (rdo), meaning only one can be active at a time. The first option (yes) is checked by default. Below the inputs, we include a .switch wrapper containing two labels and a span element that acts as the slider.
Paste the following HTML code into your file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radio Button</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<form action="">
<input type="radio" name="rdo" id="yes" checked />
<input type="radio" name="rdo" id="no"/>
<div class="switch">
<label for="yes">Yes</label>
<label for="no">No</label>
<span></span>
</div>
</form>
</body>
</html>
The structure is now ready for styling, so let’s move on to the CSS.
Step 2: CSS Styling
Next, create a file named styles.css and add the CSS code below.
This stylesheet controls the appearance of the switch, the slider animation, background colors, and label behaviors for both selected and unselected states.
body {
font-family: sans-serif;
font-weight: 800;
background-color: #d6cbcb;
}
.switch {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 50px;
text-align: center;
margin: -30px 0 0 -75px;
background: #4cd964;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
border-radius: 25px;
}
.switch span {
position: absolute;
width: 20px;
height: 4px;
top: 50%;
left: 50%;
margin: -2px 0px 0px -4px;
background: #fff;
display: block;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
border-radius: 2px;
}
.switch span:after {
content: "";
display: block;
position: absolute;
width: 4px;
height: 12px;
margin-top: -8px;
background: #fff;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
border-radius: 2px;
}
input[type=radio] {
display: none;
}
.switch label {
cursor: pointer;
color: rgba(0,0,0,0.2);
width: 60px;
line-height: 50px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
label[for=yes] {
position: absolute;
left: 0px;
height: 20px;
}
label[for=no] {
position: absolute;
right: 0px;
}
#no:checked ~ .switch {
background: #ff3b30;
}
#no:checked ~ .switch span {
background: #fff;
margin-left: -8px;
}
#no:checked ~ .switch span:after {
background: #fff;
height: 20px;
margin-top: -8px;
margin-left: 8px;
}
#yes:checked ~ .switch label[for=yes] {
color: #fff;
}
#no:checked ~ .switch label[for=no] {
color: #fff;
}
This styling gives the radio button a smooth and modern toggle-like appearance. When the user selects “No”, the slider shifts to the right and the background turns red. Selecting “Yes” brings it back to the left with a green background.
Preview
Conclusion
Congratulations! You’ve successfully built a Pure CSS radio button switch using clean HTML and CSS. Not only is this solution lightweight and visually appealing, but it’s also highly customizable and accessible. You can modify colors, sizes, animations, and labels to match any project or theme.
Keep experimenting with creative designs to make your UI even more engaging and user-friendly.