Custom Radio Buttons with CSS

In this tutorial we will see how to make Custom Radio Buttons with CSS. 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" id="lang-1" name="lang" value="HTML" class="radio" checked>
<label class="label label-1" for="lang-1">HTML</label>
    
<input type="radio" id="lang-2" name="lang" value="CSS" class="radio">
<label class="label label-2" for="lang-2">CSS</label>
    
<input type="radio" id="lang-3" name="lang" value="JavaScript" class="radio">
<label class="label label-3" for="lang-3">JavaScript</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;
    font-family: 'Barlow Condensed',sans-serif;
    background-color: #B8EAFF;
}
.radio
{
    display: none;
}
.label
{
    padding: 5px 10px;
    background-color: #888;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
}
#lang-1:checked ~ .label-1,
#lang-2:checked ~ .label-2,
#lang-3:checked ~ .label-3
{
   background-color: #0069D9;   
}
</style>

Demo

Check Demo

Video Tutorial

Watch our video tutorial on Custom Radio Buttons with CSS.