Animated Segmented Controls with Pure CSS/CSS3

Category: CSS & CSS3 , Form , Recommended | October 3, 2016
Author: fstgerm
Views Total: 6,339
Official Page: Go to website
Last Update: October 3, 2016
License: MIT

Preview:

Animated Segmented Controls with Pure CSS/CSS3

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

You Might Be Interested In:


Leave a Reply