Radio-Button Fancy Edition

.c-radio-fancy

Choose one:

• Abfüllung
• Rezeptur
• Disabled

hide code

<label class="c-label">Choose one:</label>
<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>