css3 radio bouton

css3 radio bouton degradé ++

by polinux

HTML

<input name="rad" id="radio_r1" value="r1" type="radio">
<label for="radio_r1" >réponse 1</label><br>
<input name="rad" id="radio_r2" value="r2" type="radio">
<label for="radio_r2" >réponse 2</label><br>
<input name="rad" id="radio_r3" value="r3" type="radio">
<label for="radio_r3" >réponse 3</label>

CSS

body {
    background:#707c9b;
}

label {     
    font-family: Comic Sans MS;
    font-size: 1em; 
    padding-top : 12px;
}
input[type="radio"] {
    opacity: 0;     
    width: 1px;   
    height: 1px;
    margin-top: 24px;
} 
input[type=radio] + label:before {     
    font-size: 8px;     
    padding:0 7px;     
    content:"";     
    border:6px solid #3d3d3d;
    border-radius:16px;
    margin-right:4px;
    background:#111111;
 /*   background-image: -moz-linear-gradient(top center, #cbcefb, #ffffff);   */
}  
input[type=radio]:checked + label:before { 
    background-color: black;
    background-image: -moz-linear-gradient(top,  rgba(177,214,242,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 57%, rgba(55,157,236,1) 100%);  
}