Animated Segmented Controls with Pure CSS/CSS3

Preview:

Description:

A pure CSS/SCSS solution ton transform standard checkbox and radio button into animated label-style segmented controls.

Features:

• Simple and beautiful
• Custom sizes
• Fluid and responsive design
• Can be disabled

Basic Usage:

Transforms a group of radio buttons into segmented controls.

<div class="segmented-control" style="width: 100%; color: #5FBAAC">
  <input type="radio" name="sc-1-1" id="sc-1-1-1">
  <input type="radio" name="sc-1-1" id="sc-1-1-2">
  <input type="radio" name="sc-1-1" id="sc-1-1-3" checked>
  <input type="radio" name="sc-1-1" id="sc-1-1-4">
  <label for="sc-1-1-1" data-value="Lorem Ipsum">Lorem Ipsum</label>
  <label for="sc-1-1-2" data-value="Risus Purus">Risus Purus</label>
  <label for="sc-1-1-3" data-value="Pellentesque Porta">Pellentesque Porta</label>
  <label for="sc-1-1-4" data-value="Fringilla">Fringilla</label>
</div>

Transforms a group of checkboxes into segmented controls.

<div class="segmented-control" style="width: 100%;">
  <input type="checkbox" name="sc-2-1" id="sc-2-1-1" checked>
  <label for="sc-2-1-1" data-value="Venenatis">Venenatis</label>
</div>
<div class="segmented-control" style="width: 100%;">
  <input type="checkbox" name="sc-2-1" id="sc-2-1-2">
  <label for="sc-2-1-2" data-value="Malesuada">Malesuada</label>
</div>
<div class="segmented-control" style="width: 100%;">
  <input type="checkbox" name="sc-2-1-3" id="sc-2-1-3" checked>
  <label for="sc-2-1-3" data-value="Consectetur">Consectetur</label>
</div>
<div class="segmented-control" style="width: 100%;">
  <input type="checkbox" name="sc-2-1-4" id="sc-2-1-4">
  <label for="sc-2-1-4" data-value="Egestas">Egestas</label>
</div>

Changelog:

10/03/2016

• fixed useless transition on checkbox