Pure CSS Custom Radio Buttons

In this tutorial we will see how to make Pure CSS Custom Radio Buttons. Simple CSS is used for this purpose, HTML code and CSS code is given.

Table of Contents

• HTML Code
• CSS Code
• Demo
• Video Tutorial
• More CSS Tutorials

HTML Code

HTML Code is given below.

<form>

<input type="radio" name="lang" class="radio" id="radio-1" checked>
<label class="label" for="radio-1"></label>
    
<input type="radio" name="lang" class="radio" id="radio-2">
<label class="label" for="radio-2"></label> 
    
<input type="radio" name="lang" class="radio" id="radio-3">
<label class="label" for="radio-3"></label>     
    
</form>  

CSS Code

CSS Code is given below.

<style>
body
{
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #B187FF;
}
.radio
{
    display: none;
}
.label
{
    cursor: pointer;
    margin: 15px;
}
.label::before
{
    content: '';
    display: inline-block;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: #824DE3;
}
.radio:checked + .label::before
{
    box-shadow: inset 0px 3px 0px 3px #824DE3;
    background-color: #fff;
}
</style>

Demo

Check Demo

Video Tutorial

Watch our video tutorial on Pure CSS Custom Radio Buttons.