<div class="wrap">
 <div class="circle">
   <i class="icon i1 icon-terminal"></i>
   <i class="icon i2 icon-code-fork"></i>
   <i class="icon i3 icon-keyboard"></i>
   <i class="icon i4 icon-code"></i>
   <div class="line1"></div>
   <div class="line2"></div>
   <span class="text">hover on me</span>
 </div>
</div>

html{
  height: 100%;
}

body{
  height: 100%;
  background: #E94E3D;
}

.wrap{
  margin: 100px auto;
  width: 130px;
}

@color: #E94E3D;

.circle{
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #E94E3D;
  box-shadow: 60px -60px 0 2px @color, -60px -60px 0 2px @color, -60px 60px 0 2px @color, 60px 60px 0 2px @color, 0 0 0 2px #E94E3D;
  
  .icon{
    position: absolute;
    display: block;
    color: #fff;
    font-size: 20px;
  }
  
  .i1{
    top: -25px;
    left: 55px;
  }
  
  .i2{
    top: 50px;
    left: -20px;
  }
  
  .i3{
    bottom: -25px;
    left: 50px;
  }
  
  .i4{
    top: 50px;
    right: -30px;
  }
  
  .line1, .line2{
    position: absolute;
    top: 60px;
    left: 60px;
    border-top: 1px solid #fff;
    transform: rotate(45deg);
    transform-origin: 50% 50%;
  }
  
  .line2{
    transform: rotate(-45deg);
  }
  
  .text{
    position: absolute;
    top: 38px;
    left: 30px;
    width: 60px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font: 18px sans-serif;
    transition: opacity .2s ease;
  }
  
  &:hover{
    animation: border .4s ease 1 forwards;
    cursor: none;
    
    .text{
      opacity: 0;
    }
    
    .line1, .line2{
      animation: line .5s ease .45s forwards;
    }
    
    .i1{
      animation: icon1 .5s ease .8s forwards;
    }
    
    .i2{
      animation: icon2 .5s ease .9s forwards;
    }
    
    .i3{
      animation: icon3 .5s ease 1.0s forwards;
    }
    
    .i4{
      animation: icon4 .5s ease 1.1s forwards;
    }
    
  }
}


@keyframes border{
  0% {
    box-shadow: 60px -60px 0 2px @color, -60px -60px 0 2px @color, -60px 60px 0 2px @color, 60px 60px 0 2px @color, 0 0 0 2px #E94E3D;
  }
  25% {
    box-shadow: 0 -125px 0 2px @color, -60px -60px 0 2px @color, -60px 60px 0 2px @color, 60px 60px 0 2px @color, 0 0 0 2px #fff;
  }
  50% {
    box-shadow: 0 -125px 0 2px @color, -125px 0px 0 2px @color, -60px 60px 0 2px @color, 60px 60px 0 2px @color, 0 0 0 2px #fff;
  }
  75% {
    box-shadow: 0 -125px 0 2px @color, -125px 0px 0 2px @color, 0px 125px 0 2px @color, 60px 60px 0 2px @color, 0 0 0 2px #fff;
  }
  100% {
    box-shadow: 0 -125px 0 2px @color, -125px 0px 0 2px @color, 0px 125px 0 2px @color, 120px 40px 0 2px @color, 0 0 0 2px #fff;
  } 
}

@keyframes icon1{
  0% {top: -25px;}
  100% {top: 10px;}
}

@keyframes icon2{
  0% {left: -20px;}
  100% {left: 15px;}
}

@keyframes icon3{
  0% {bottom: -25px;}
  100% {bottom: 10px;}
}

@keyframes icon4{
  0% {right: -25px;}
  100% {right: 15px;}
}

@keyframes line{
  0%{
    left: 60px;
    width: 0;
  }
  100% {
    left: 10px;
    width: 100px;
  }
}