Radio-Button Fancy Edition

.c-radio-fancy

Choose one:

• Abfüllung
• Rezeptur
• Disabled

<ul class="c-radio-fancy">
  <li class="c-radio-fancy__btn h-width-20">
    <input class="c-radio-fancy__input" type="radio" id="radio-abfuellung" name="fancy-radio-group" checked />
    <label class="c-radio-fancy__label" for="radio-abfuellung">
      <i class="fas fa-flask fa-2x m-r-s"></i>
      Abfüllung
    </label>
  </li>
  <li class="c-radio-fancy__btn h-width-20">
    <input class="c-radio-fancy__input" type="radio" id="radio-rezeptur" name="fancy-radio-group" />
    <label class="c-radio-fancy__label" for="radio-rezeptur">
      <i class="fas fa-mortar-pestle fa-2x m-r-s"></i>
      Rezeptur
    </label>
  </li>
  <li class="c-radio-fancy__btn h-width-20">
    <input class="c-radio-fancy__input" type="radio" id="disabled-radio" name="fancy-radio-group" disabled />
    <label class="c-radio-fancy__label" for="disabled-radio">
      <i class="fas fa-lightbulb fa-2x m-r-s"></i>
      Disabled
    </label>
  </li>
</ul>

Single Button (Disabled + Checked)

Abfüllung

<div class="c-radio-fancy__btn">
    <input class="c-radio-fancy__input" type="radio" id="test2" disabled checked />
    <label class="c-radio-fancy__label" for="test2">
      <i class="fas fa-flask fa-2x m-r-s"></i>
      Abfüllung
    </label>
</div>