Animated Segmented Controls with Pure CSS/CSS3

Category: CSS & CSS3 , Form , Recommended | October 3, 2016
Views Total:8,462 views
Official Page:Go to website
Last Update:October 3, 2016


Animated Segmented Controls with Pure CSS/CSS3


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


  • 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>

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 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 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 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>



  • fixed useless transition on checkbox

You Might Be Interested In:

Leave a Reply