Cacher is the code snippet organizer for pro developers

<style>
.ivm-radio input {
    display:none;
}
.ivm-radio label {
    display:inline-block;
}

.ivm-radio > label > span {
    display:block;
    display:inline-block;
    border: 1px solid #ddd;
    background: #eee;
    padding:5px 25px;
    cursor:pointer;
    min-width:90px;
    text-align:center;
}
.ivm-radio > label + label {
    margin-left:-5px;
}
.ivm-radio > label:first-child > span {
    border-top-left-radius: 10px;
}

.ivm-radio input:checked + span {
    background: green;
    color: #fff;
    border-color: green;
}

.ivm-radio input.ivm-disabled:checked + span {
    background: red;
    border-color: red;
    color: #fff;
}
</style>

<div class="ivm-radio">
    <p>Is this awesome?</p>
    <label>
      <input type="radio" name="switch" value="yes" checked />
      <span>Yes</span>
    </label>
    <label>
      <input class="ivm-disabled" type="radio" name="switch" value="no" />
       <span>No</span>
    </label>
</div>