<div class="wrapper">
  <div class="menu">
    <input type="checkbox">
    <button class="fa fa-pencil"></button>
    <button class="fa fa-refresh"></button>
    <button class="fa fa-trash"></button>
    <button class="fa fa-bars"></button>
  </div>
</div>

@import "compass";

$background-color: #ECE5CE;
$button-color: #E08E79;
$button-text-color: #FFF;
$button-size: 40px;
$magic-number: 3px;
$animation-speed: 250ms;
$animation: cubic-bezier(.41,.29,.38,.94);

html,
body {
  height: 100%;
}

.wrapper {
  width: 100%;
  height: 100%;
  background-color: $background-color;
  text-align: center;
}

.menu {
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
}

input {
  position: absolute;
  top: -$magic-number;
  right: -$magic-number;
  z-index: 5;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: $button-size;
  height: $button-size;
  border-radius: 50%;
  outline: 0;
  cursor: pointer;
  
  &:hover {
    & ~ .fa-bars {
      background-color: darken($button-color, 10%);
    }
  }
  
  & ~ button { 
    $segment-length: 49px;
    $segment-rotate: 90deg;
    $count: 1;
    @for $i from 4 through 2 {
      &:nth-child(#{$i}) {
        transform: translateX($segment-length * $count) rotate($segment-rotate * $count);
        $count: $count + 1;
      }
    }
  }
  
  &[type="checkbox"]:checked ~ button {
    transform: translateX(0);
  }
}

button {
  display: inline-block;
  background-color: $button-color;
  border: 0;
  outline: 0;
  border-radius: 50%;
  height: $button-size;
  width: $button-size;
  text-align: center;
  cursor: pointer;
  margin-right: 5px;
  will-change: transform;
  
  @include transition(
    background-color $animation-speed $animation,
    transform $animation-speed $animation
  );
  
  &:hover {
    background-color: darken($button-color, 10%);
  }
  
  &:active {
    background-color: darken($button-color, 20%);
  }
}

.fa {
  color: $button-text-color;
}