pure CSS button group toggle

by Jens Kühn

HTML

<div class="toggle-collapsed">
  <div class="toggle">
    <!-- Checkbox toggle -->
    <input type="radio" name="joke" value="selected" id="beethoven-joke" class="toggle-input" checked="checked">
    <label for="beethoven-joke" class="toggle-label"><img width="16" height="16" title="Säulendiagramm" src="http://demo.piwik.org/plugins/Morpheus/images/chart_bar.png"></label>
  </div>

  <div class="toggle">
    <!-- Checkbox toggle -->
    <input type="radio" name="joke" value="selected" id="army-joke" class="toggle-input">
    <label for="army-joke" class="toggle-label"><img width="16" height="16" title="Kreisdiagramm" src="http://demo.piwik.org/plugins/Morpheus/images/chart_pie.png"></label>
  </div>

  <div class="toggle">
    <!-- Checkbox toggle -->
    <input type="radio" name="joke" value="selected" id="pepper-joke" class="toggle-input">
    <label for="pepper-joke" class="toggle-label"><img width="16" height="16" title="Schlagwortwolke" src="http://demo.piwik.org/plugins/Morpheus/images/tagcloud.png"></label>
  </div>
</div>

SCSS

.toggle {
  margin: 0 auto;
  float: left;
}
@mixin target() {
  visibility: visible;
  width: 1.2em;
  height: 1.2em;
  padding: .5em;
  opacity: 1;
  transform: scale(1);
}
//Style toggle
.toggle-label {
  visibility: hidden;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  display: inline-block;
  transform: scale(.8);
  font-size: 16px;
  background: #dcdacf;
  cursor: pointer;
  
  -webkit-transition: width .5s ease, height .5s ease, padding .2s ease, opacity .6s ease;
    -moz-transition: width .5s ease, height .5s ease, padding .2s ease, opacity .6s ease;
    -o-transition: width .5s ease, height .5s ease, padding .2s ease, opacity .6s ease;
    transition: width .5s ease, height .5s ease, padding .2s ease, opacity .6s ease;
}

.toggle-input {
  display: none; //Hide input element
}

//Display content when checkbox is "checked"
.toggle-input:checked {
  ~ .toggle-label {
    background: #cccccc;
    @include target();
  }
}

.toggle-collapsed {
  .toggle-input {
    &:checked ~ .toggle-label {
      @include target();
      cursor: default;
    }
  }
  &:hover {
    //background: #dcdacf;
    .toggle-input {
      &:checked ~ .toggle-label {
        @include target();
        &:hover {
          background: #cccccc;
        }
      }
      ~ .toggle-label {
          @include target();
          &:hover {
            background: #e9e8e1;
        }
      }
    }
  }
}