Menu circulaire SASS

<div class="menu">
  <nav>
    <ul class="outer">
      <li><span class="bouton"></span>
        <ul class="inner">
          <li><i class="fa fa-twitter" aria-hidden="true"></i></li>
          <li><i class="fa fa-facebook" aria-hidden="true"></i></li>
          <li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
          <li><i class="fa fa-youtube" aria-hidden="true"></i></li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
 
/* Other stuff */
body {
  background-color: #416dbd;
}
 
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.menu, 
.menu .inner, 
.menu .inner > li {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
 
.bouton {
  display: block;
  width: 48px;
  height: 48px;
  position: relative;
  z-index: 20;
  background-color: #ffffff;
  transition: transform .3s ease;
  border-radius: 100%;
}
.bouton:before, 
.bouton:after {
  content: '';
  display: block;
  width: 2px;
  height: 30px;
  background-color: #ff5a94;
  position: absolute;
  left: 23px;
  top: 9px;
}
.bouton:after {
  width: 30px;
  height: 2px;
  left: 9px;
  top: 23px;
}
 
.menu:hover .bouton{
  cursor: pointer;
  transform: rotate(45deg);
}
 
.menu .inner{
  display: block;
  width: 48px;
  height: 48px;
  background-color: #FFF;
  padding: 6px;
  transition: width .3s ease, height .3s ease;
  border-radius: 100%;
}
 
.menu:hover .inner{
  width: 200px;
  height: 200px;
}
 
.menu .inner > li{
  transition: left .3s ease, top .3s ease;
}
 
.menu:hover .inner > li:nth-child(1){left: 20%;}
.menu:hover .inner > li:nth-child(2){top: 20%;}
.menu:hover .inner > li:nth-child(3){left: 80%;}
.menu:hover .inner > li:nth-child(4){top: 80%;}
 
.menu .fa, 
.menu .inner > li .fa {
  color: #333; 
  font-size:30px;
}