How to Make a Custom Radio button using Only CSS

in this tutorial, I will show you how to customize your Radio button using CSS only.
I will give you the Source code of the project, only what you have to do is to copy& paste it. of course, you can change it and modify it as you like to adapt it to your website design.

HTML code

 <!DOCTYPE HTML>

<html>
    <head>
        <link rel="stylesheet" href="main.css">
        <title>Custom Radio button</title>
    </head>

    <body>
        <div class="container">
            <h1>Pick a number</h1>
            <div class="Group">
                <label>One
                    <input type="radio" name="num" value="1">
                    <span class="Radio"></span>
                </label><br>
                
                 <label>Two
                    <input type="radio" name="num" value="1">
                    <span class="Radio"></span>
                </label><br>
                
                 <label>Three
                    <input type="radio" name="num" value="1">
                    <span class="Radio"></span>
                </label><br>
                
                 <label>Four
                    <input type="radio" name="num" value="1">
                    <span class="Radio"></span>
                </label><br>
            </div>
        </div>
    </body>

</html>

CSS code

 @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
.container{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 8px;
    background-color: #fafafa;
    box-shadow: 0 2px 8px rgba(64,64,64,.5);
    padding: 10px 40px;
    font-family: 'Open Sans',sans-serif;
}

.container label{
    position: relative;
    display: block;
    font-size: 22px;
    padding-left: 5px;
    user-select: none;
    cursor: pointer;
}
.container label input{
    opacity: 0;
    width: 0;
    height: 0;
    position: relative;
}
.container label .Radio{
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 25px;
    height: 25px;
    margin-left: 25px;
    border-radius: 100%;
    border: 1px solid #03a9f4;
    transition: .4s ease;
}
.container label:hover .Radio{
    border: 2px solid #03a9f4;
}
.container label .Radio::after{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 70%;
    height: 70%;
    border-radius: 100%;
    display: none;
    background-color:#03a9f4;
}
.container label input:checked ~ .Radio::after{
    display: block;
}

Thank you for following this tutorial, I hope that you liked it. comment below if you want any other project.