Custom Emoji Radio Buttons with CSS

In this tutorial we will see how to make a set of Custom Emoji 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="mood-1" name="mood" value='Worried' class="radio" checked>
<label class="emoji emoji-1" for='mood-1'>😟</label>
    

<input type="radio" id="mood-2" name="mood" value='Sad' class="radio">
<label class="emoji emoji-2" for='mood-2'>😡</label>  
    

<input type="radio" id="mood-3" name="mood" value='Confused' class="radio">
<label class="emoji emoji-3" for='mood-3'>😔</label>  
    

<input type="radio" id="mood-4" name="mood" value='Happy' class="radio">
<label class="emoji emoji-4" for='mood-4'>😊</label>
    

<input type="radio" id="mood-5" name="mood" value='Joyful' class="radio">
<label class="emoji emoji-5" for='mood-5'>😂</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: #A1FFAC;
}
form
{
    background-color: #333;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 4px 2px #000;
}
.radio
{
    display: none;
}
.emoji
{
    font-size: 40px;
    padding: 5px 10px;
    cursor: pointer;
    display: inline-block;
}
#mood-1:checked ~ .emoji-1,
#mood-2:checked ~ .emoji-2,
#mood-3:checked ~ .emoji-3,
#mood-4:checked ~ .emoji-4,
#mood-5:checked ~ .emoji-5
{
    background-color: #111;
}
</style>

Demo

Check Demo

Video Tutorial

Watch our video tutorial on Custom Emoji Radio Buttons with CSS.