custom-checkbox-radio-buttons-2.html

<fieldset class="js-nc-form-buttons">
  <legend>This is the radio selection</legend>
  <p class="nc-button-wrapper">
    <input type="radio" name="color" id="color_1" value="red">
    <label for="color_1">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper"><g class="nc-interact_input-radio-c-16"><defs><clipPath id="nc-i-radio-mask"><circle cx="8" cy="8" r="8"></circle> </clipPath> </defs> <circle cx="8" cy="8" r="8" fill="#d1d1d1"></circle><circle cx="8" cy="8" r="12" fill="#43a6dd" clip-path="url(#nc-i-radio-mask)" transform="translate(-8 -8) scale(0)"></circle><circle cx="8" cy="8" r="3" fill="#fff" transform="translate(-8 -8) scale(0)"></circle></g></g></svg>
      Red
    </label>
  </p>
  <p class="nc-button-wrapper">
    <input type="radio" name="color" id="color_2" value="yellow">
    <label for="color_2">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper"><g class="nc-interact_input-radio-c-16"><defs><clipPath id="nc-i-radio-mask"><circle cx="8" cy="8" r="8"></circle> </clipPath> </defs> <circle cx="8" cy="8" r="8" fill="#d1d1d1"></circle><circle cx="8" cy="8" r="12" fill="#43a6dd" clip-path="url(#nc-i-radio-mask)" transform="translate(-8 -8) scale(0)"></circle><circle cx="8" cy="8" r="3" fill="#fff" transform="translate(-8 -8) scale(0)"></circle></g></g></svg>
      Yellow
    </label>
    </p>
</fieldset>