<div class="circleDock">
  <div class="botao circular g0"><span>Home</span></div>
  <div class="botao circular g45"><span>Company</span></div>
  <div class="botao circular g90"><span>Products</span></div>
  <div class="botao circular g135"><span>Services</span></div>
  <div class="botao circular g180"><span>Contact</span></div>
  <div class="botao central">Menu</div>
</div>

/*Atributuos axiliares*/
@tempoMarginLeft: 200ms;
@tempoTransform: 800ms;
@corPadrao: black;
@corBase: spin(@corPadrao, -12);
@tamanhoBase: 80px;

/*Atalho para transition - propriedade que se repete muito */
.transition() {
  transition: all 500ms linear;
}

/*Função LESS para tamanho do botão*/
.tamanhoBotao(@tamanhoBotao:80px) {
  width: @tamanhoBotao;
  height: @tamanhoBotao;
  border-radius: @tamanhoBotao/2;
  line-height: @tamanhoBotao;
  margin-left: -(@tamanhoBotao/2);
  margin-bottom: -(@tamanhoBotao/2);
}
//Rodar rotulo do botão
.rotacionarTexto(@graus) {
  & span {
    transform: rotate(-@graus+0deg);
  }
}

//Função que cria propriedade e subregras de acordo com o grau da rotação
.posicionar(@graus) {
  transform: rotate(@graus+0deg);
  & span {
    transform: rotate(-@graus+0deg);
  }
}

//----------- O CSS ANINHADO COMEÇA AQUI ----------------//

body {
 font-family: Arial;
  position: absolute;
  height: 100%;
  width: 100%;
  
  //Evita o flickering no navegador
  transform:translate3d(0,0,0);
}

//Área de segurança para que os botões não retornem aos seus lugares quando mouse estiver entre os botões 
.circleDock {
  height: 160px;
  width: 160px;
  position: fixed;
  bottom: 0;
  left: 50%;
  margin-left: -80px;
  margin-bottom: 0px;
  border-radius: 50%;
  
  //Ao passar o mouse, a área de segurança se expandirá
  &:hover {
    width: 400px;
    height: 400px;
    margin-left: -200px;
    margin-bottom: -120px;
  }
  
  //Base dos botões
  .botao {
    .tamanhoBotao();
    background-color: @corBase;
    text-align: center;
    position: absolute;
    font-size: 12px;
    cursor: pointer;
    color: white;
    text-transform: uppercase;
    left: 50%;
    bottom: 50%;
    
    //Ao passar o mouse em qualque botão
    &:hover {
      background-color: lighten(@corBase, 20%);
    }
    
    //Botão circular
    &.circular { 
      transform-origin: 180px;
      transition: margin-left @tempoMarginLeft @tempoTransform ease-in, transform @tempoTransform 0ms ease-in;
      
      //Rótulo do botão
      span {
        //transition: transform 0ms ease-in;
        display: block;
        transition: transform @tempoTransform 0ms ease-in;
      }
      
      &.g0 { .rotacionarTexto(0); z-index: 5; }
      &.g45 { .rotacionarTexto(45); z-index: 4; }
      &.g90 { .rotacionarTexto(90); z-index: 3; }
      &.g135 { .rotacionarTexto(135); z-index: 2; }
      &.g180 { .rotacionarTexto(180); z-index: 1; }
    }
    

   
    &.central {
      .transition;
      @tamanhoBotaoCentral: 160px;
      .tamanhoBotao(@tamanhoBotaoCentral);
      z-index: 6;
      cursor: default;
    }
  }
  
  /* Quando passar ou mouse no "botão central" */
  
  &:hover .botao.central {
     background-color: lighten(@corBase, 70%);
  }
  //...os botões ao redor
  &:hover .botao.circular {
    //Define o transition de entrada
    transition: 
        margin-left @tempoMarginLeft 0 ease-out, 
        transform @tempoTransform @tempoMarginLeft ease-out;
    
    //Afasta o "primeiro botão" para a direita
    margin-left: -180px;
    
    
    span {
       transition: transform @tempoTransform @tempoMarginLeft ease-out; 
    }
   
    &.g0 { .posicionar(0); }
    &.g45 { .posicionar(45); }
    &.g90 { .posicionar(90); }
    &.g135 { .posicionar(135); }
    &.g180 { .posicionar(180); }
    
  }
}