Radio Button style : demo 15

                        

                            

                                

                                    
Choose Your Favourite Color :
                                    

                                        

                                            
                                            
                                        
                                        

                                            
                                            
                                        
                                        

                                            
                                            
                                        
                                        

                                            
                                            
                                        
                                        

                                            
                                            
                                        
                                        

                                            
                                            
                                        
                                        
                                    
        
                                
                            
                        
                    

                        .title{
                            font-size: 18px;
                            font-weight: 600;
                            text-align: center;
                            margin: 0 0 10px;
                        }
                        .option-list{
                            text-align: center;
                            padding: 5px 0;
                            margin: 0;
                            list-style: none;
                        }
                        .radio-button{
                            line-height: 1;
                            margin: 0 5px;
                            display: inline-block;
                        }
                        .radio-button input[type=radio]{
                            visibility: hidden;
                            position: absolute;
                            left: 0;
                            right: 0;
                        }
                        .radio-button label{
                            background-color: #EA2027;
                            height: 22px;
                            width: 22px;
                            margin: 0;
                            border-radius: 3px;
                            cursor: pointer;
                            transition: all 0.3s ease 0s;
                        }
                        .radio-button.orange label{ background-color: #EE5A24; }
                        .radio-button.yellow label{ background-color: #F79F1F; }
                        .radio-button.lightgreen label{ background-color: #A3CB38; }
                        .radio-button.green label{ background-color: #009432; }
                        .radio-button.skyblue label{ background-color: #12CBC4; }
                        .radio-button.blue label{ background-color: #0652DD; }
                        .radio-button.purple label{ background-color: #b600ff; }
                        .radio-button.pink label{ background-color: #ff00e5; }
                        .radio-button.magenta label{ background-color: #d60e83; }
                        .radio-button.brown label{ background-color: #a50303; }
                        .radio-button.black label{ background-color: #000; }
                        .radio-button input[type=radio]:checked+label{ box-shadow: 0 0 0 2px #fff,0 0 0 4px #555; }
                        @media only screen and (max-width:767px){
                            .radio-button{ margin: 0 5px 20px; }
                        }