RadioButton Style with css

Intoduction :- 
Hii Friends...
Have you ever wanted to use your own style in  radio buttons ? This script will let you do that  Easily. This can possible with the help of css .This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others.So go ahead, CSS form styling is this easy. Now I am going to put this with Example.

DEMO:- 

Example :-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script> 
<style type="text/css" >
.change {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150px;
      height: 50px;
      text-align: center;
      margin: -30px 0px 0px -75px;
      background: rgb(36, 159, 163);
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .change span {
      position: absolute;
      width: 20px;
      height: 4px;
      top: 50%;
      left: 50%;
      margin: -2px 0px 0px -4px;
      background: #ffffff;
      display: block;
      -webkit-transform: rotate(-45deg);
      -webkit-transition: all 0.2s ease;
      -moz-transform: rotate(-45deg);
      -moz-transition: all 0.2s ease;
      -ms-transform: rotate(-45deg);
      -ms-transition: all 0.2s ease;
      transform: rotate(-45deg);
      transition: all 0.2s ease;
    }
    .change span:after {
      content: "";
      display: block;
      position: absolute;
      width: 4px;
      height: 12px;
      margin-top: -8px;
      background: #ffffff;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    input[type=radio] {
      display: none;
    }
    .change label {
      cursor: pointer;
      color: rgba(0, 0, 0, 0.2);
      width: 60px;
      font-family: 'Roboto';
      font-weight: 400;
      line-height: 50px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    label[for=yes] {
      position: absolute;
      left: 0px;
      height: 20px;
    }
    label[for=no] {
      position: absolute;
      right: 0px;
    }
    #no:checked ~ .change {
      background: #eb4f37;
    }
    #no:checked ~ .change span {
      background: #ffffff;
      margin-left: -8px;
    }
    #no:checked ~ .change span:after {
      background: #ffffff;
      height: 20px;
      margin-top: -8px;
      margin-left: 8px;
    }
    #yes:checked ~ .change label[for=yes] {
      color: #ffffff;
    }
    #no:checked ~ .change label[for=no] {
      color: #ffffff;
    }
 </style>
    <div align="center" style="position:relative; padding:120px 0px;">
      <div class="toggle-radio">
        <input type="radio" name="rdo" id="yes" checked>
        <input type="radio" name="rdo" id="no">
        <div class="change">
          <label for="yes">Yes</label>
          <label for="no">No</label>
          <span></span>
        </div>
      </div>
    </div>