Icon 2 Box auf 1 Box

by Jens Kühn

HTML

<ul>
  <li class="b"></li>
  <li class="s"></li>
</ul>

<ul>
  <li class="s"></li>
  <li class="b"></li>
</ul>

<ul class="active">
  <li class="b"></li>
  <li class="s"></li>
</ul>

<ul class="active">
  <li class="s"></li>
  <li class="b"></li>
</ul>

SCSS

ul{
  width: 3.2em;
  height: 1.2em;
  padding: .2em 0;
  background: #fff;  
}
li{
  list-style: none;
  float: left;
  border: .1em solid #000;
  width: 1em;
  height: 1em;
  margin: 0 .2em;
  -webkit-transition: width .3s, border .2s ease-out; /* For Safari 3.1 to 6.0 */
  transition: width .3s, border .2s ease-out;
}

ul.active li,
ul:hover li{
    &.b{
      width: 2.1em;
    }
    &.s{
      width: 0em;
      border : 0em solid #fff;   
    }
  }
  
ul.active:hover li{
    &.b{
      width: 1em;
    }
    &.s{
      width: 1em;
      border : .1em solid #000;   
    }
  }