<div>
  <a href="#">
    <span class="left">
      <span class="circle-left"></span>
      <span class="circle-right"></span>
    </span>
    <span class="right">
      <span class="circle-left"></span>
      <span class="circle-right"></span>
    </span>
  </a>
</div>

@mixin transition() {
    transition: all .4s cubic-bezier(.215,.61,.355,1);
}

div {
  a {
    width: 100px;
    height: 100px;
    position: absolute;
    right: 50%;
    top: 50%;
    margin-top: -50px;
    margin-right: -50px;
    background-color: #ffffff;
    border-radius: 50px;
    opacity: 1;
    @include transition();
    -webkit-box-shadow: 0px 0px 30px 0px rgba(247,149,29,0.5);
    -moz-box-shadow: 0px 0px 30px 0px rgba(247,149,29,0.5);
    box-shadow: 0px 0px 30px 0px rgba(247,149,29,0.5);
    
    & > span {
      background-color: #f5a700;
      display: block;
      height: 12px;
      border-radius: 6px;
      position: relative;
      @include transition();
      position: absolute;
      top: 50%;
      margin-top: -6px;
      left: 18px;
      width: 64px;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;

      span {
        display: block;
        background-color: #ed7f00;
        width: 12px;
        height: 12px;
        border-radius: 6px;
        @include transition();
        position: absolute;
        left: 0;
        top: 0;
      }

      &.left {
        transform: rotate(45deg);
        transform-origin: center;

        .circle-left {
          @include transition();
          margin-left: 0;
        }

        .circle-right {
          @include transition();
          margin-left: 52px;
        }
      }

      &.right {
        transform: rotate(-45deg);
        transform-origin: center;

        .circle-left {
          @include transition();
          margin-left: 0;
        }

        .circle-right {
          @include transition();
          margin-left: 52px;
        }
      }
    }

    &:hover {
      & > span {
        background-color: #2faee0;
        @include transition();

        span {
          @include transition();
          background-color: #008ac9;
        }

        &.left {

          .circle-left {
            @include transition();
            margin-left: 52px;
          }

          .circle-right {
            @include transition();
            margin-left: 0;
          }
        }

        &.right {

          .circle-left {
            @include transition();
            margin-left: 52px;
          }

          .circle-right {
            @include transition();
            margin-left: 0;
          }
        }
      }
    }
  }
}