<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <div class="ms-nav-container">
        <ul class="ms-nav">
          <input type="checkbox" id="ms-menu" class="ms-menu-toggle" name="ms-menu-toggle" />
          <div class="bg-change"></div>
          <li class="ms-li ms-li3 ms-li-last">
            <a href="javascript:void(0)">
              <span class="fa fa-search"></span>
            </a>
          </li>
          <li class="ms-li ms-li2">
            <a href="javascript:void(0)">
              <span class="fa fa-flask"></span>
            </a>
          </li>
          <li class="ms-li ms-li1 ms-li-first">
            <a href="javascript:void(0)">
              <span class="fa fa-fort-awesome"></span>
            </a>
          </li>
          <li class="ms-main">
            <a href="javascript:void(0)">
              <label class="ms-menu-toggle-lbl" for="ms-menu">
                <span class="fa fa-plus"></span>
              </label>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  background: #29313e;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  outline: none !important;
}
.ms-nav-container {
  position: relative;
  width: 100%;
  height: 100vh;
}
#ms-menu {
  display: none;
}
.bg-change {
  position: absolute;
  bottom: -75px;
  right: -90px;
  width: 1px;
  height: 1px;
  border-radius: 100% 0% 0% 0%;
  background: #2D394D;
  transition: all .25s ease;
}
.ms-nav .ms-menu-toggle:checked ~ .bg-change {
  width: 3000px;
  height: 3000px;
  transition: all .5s ease;
}
.ms-nav {
  position: absolute;
  bottom: 75px;
  right: 75px;
}
.ms-nav > .ms-main {
  position: relative;
}

.ms-nav > .ms-li {
  position: absolute;
  bottom: 0;
  right: 8px;
  transition: bottom .5s ease;
  z-index: 1;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li a {
  box-shadow: 0px 5px 10px #333333;
}
  .ms-nav .ms-menu-toggle:checked ~ .ms-li1 {
    bottom: 150%;
    transition: bottom .5s ease;
  }
  .ms-nav .ms-menu-toggle:checked ~ .ms-li1 a span {
    opacity: 1;
    transition: opacity .5s ease .1s;
  }
    .ms-nav .ms-menu-toggle:checked ~ .ms-main:after {
      animation: big-border-bottom-animation .5s ease .1s;
    }
    .ms-nav .ms-menu-toggle:checked ~ .ms-li1:before {
      animation: border-top-animation .5s ease .2s;
    }
    .ms-nav .ms-menu-toggle:checked ~ .ms-li1:after {
      animation: border-bottom-animation .5s ease .2s;
    }
  .ms-nav .ms-menu-toggle:checked ~ .ms-li2 {
    bottom: 265%;
    transition: bottom .6s ease;
  }
  .ms-nav .ms-menu-toggle:checked ~ .ms-li2 a span {
    opacity: 1;
    transition: opacity .6s ease .2s;
  }
    .ms-nav .ms-menu-toggle:checked ~ .ms-li2:before {
      animation: border-top-animation .5s ease .2s;
    }
    .ms-nav .ms-menu-toggle:checked ~ .ms-li2:after {
      animation: border-bottom-animation .5s ease .3s;
    }
  .ms-nav .ms-menu-toggle:checked ~ .ms-li3 {
    bottom: 380%;
    transition: bottom .7s ease;
  }
  .ms-nav .ms-menu-toggle:checked ~ .ms-li3 a span {
    opacity: 1;
    transition: opacity .7s ease .3s;
  }
    .ms-nav .ms-menu-toggle:checked ~ .ms-li3:before {
      animation: border-top-animation .5s ease .3s;
    }
    .ms-nav .ms-menu-toggle:checked ~ .ms-li3:after {
      animation: border-bottom-animation .5s ease .4s;
    }
  .ms-nav .ms-menu-toggle:checked ~ .ms-li4 {
    bottom: 495%;
    transition: bottom .8s ease;
  }
  .ms-nav .ms-menu-toggle:checked ~ .ms-li4 a span {
    opacity: 1;
    transition: opacity .8s ease .4s;
  }
    .ms-nav .ms-menu-toggle:checked ~ .ms-li4:before {
      animation: border-top-animation .5s ease .4s;
    }
  
    .ms-nav .ms-menu-toggle ~ .ms-li:before {
      content: '';
      width: 45px;
      display: block;
      position: absolute;
      bottom: -5px;
      left: 0;
      right: 0;
      margin: auto;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-top: 0px solid #337ab7;
    }
    .ms-nav .ms-menu-toggle ~ .ms-li:before {
      content: '';
      width: 45px;
      display: block;
      position: absolute;
      bottom: -5px;
      left: 0;
      right: 0;
      margin: auto;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-top: 0px solid #337ab7;
    }
    .ms-nav .ms-menu-toggle:checked ~ .ms-li:before {
      content: '';
      width: 45px;
      display: block;
      position: absolute;
      bottom: 0px;
      left: 0;
      right: 0;
      margin: auto;
      border-left: 24px solid transparent;
      border-right: 24px solid transparent;
      border-top: 25px solid #337ab7;
      z-index: 11;
    }
    .ms-nav .ms-menu-toggle:checked ~ .ms-li:after {
      content: '';
      width: 45px;
      display: block;
      position: absolute;
      top: 0px;
      left: 0;
      right: 0;
      margin: auto;
      border-left: 24px solid transparent;
      border-right: 24px solid transparent;
      border-bottom: 25px solid #337ab7;
      transition: border-bottom .3s ease;
      z-index: 11;
    }

    .ms-nav .ms-menu-toggle:checked ~ .ms-main:after {
      content: '';
      width: 60px;
      display: block;
      position: absolute;
      top: 0px;
      left: 0;
      right: 0;
      margin: auto;
      border-left: 24px solid transparent;
      border-right: 24px solid transparent;
      border-bottom: 45px solid #337ab7;
      transition: border-bottom .3s ease;
      z-index: 11;
    }
    .ms-nav .ms-menu-toggle:checked ~ .ms-li-last:after {
      content: '';
      width: 45px;
      display: block;
      position: absolute;
      top: -5px;
      left: 0;
      right: 0;
      margin: auto;
      border-left: 0px solid transparent;
      border-right: 0px solid transparent;
      border-bottom: 0px solid #337ab7;
    }

.ms-nav .ms-menu-toggle:checked ~ .ms-main span {
  transform: rotate(-45deg);
  transition: transform .35s ease;
}
.ms-nav .ms-menu-toggle ~ .ms-main span {
  transition: transform .35s ease;
  opacity: 1;
}
.ms-nav > .ms-main > a {
  box-shadow: 0px 5px 10px #333333;
}
.ms-nav > li a {
  font-size: 30px;
  color: #FFFFFF;
  background: #337ab7;
  width: 60px;
  height: 60px;
  display: block;
  border-radius: 100%;
  position: relative;
  text-align: center;
}

  .ms-nav > .ms-main a,
  .ms-nav > .ms-main > a > label {
    font-size: 30px;
    color: #FFFFFF;
    background: #337ab7;
    width: 75px;
      height: 75px;
    display: block;
    border-radius: 100%;
    position: relative;
    text-align: center;
    z-index: 19;
  }
    .ms-nav > li > a span {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      height: 30px;
      width: 30px;
      opacity: 0;
      z-index: 12;
    }
@keyframes border-top-animation {
  0% {
    bottom: 0px;
  }
  50% {
    bottom: -14px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes border-bottom-animation {
  0% {
    top: 0px;
  }
  50% {
    top: -13px;
  }
  100% {
    top: 0px;
  }
}
@keyframes big-border-bottom-animation {
  0% {
    top: 0px;
  }
  50% {
    top: -30px;
  }
  100% {
    top: 0px;
  }
}