<html>
  <head>
   </head>
  <body>
    <div id="cfe-outer">
      <div id="m1" class="cool-effect">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
      </div>
      
      <div id="m2" class="cool-effect">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
      </div>
      
      <div id="m3" class="cool-effect">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
      </div>
    </div>
  </body>
</html>
@import "lesshat";

@bg: rgb(237, 64, 116);
@fg: white;
@width: 100px;
@height: 100px;
@duration: .5s;

#cfe-outer {
  width: 100%;
  height: 100%;
  margin-top: 20px;
}

.cool-effect {
  margin-left: 20px;
  float: left;
  background: @bg;
  width: @width;
  height: @width;

  border-radius: 50%;
  position: relative;
  
  transition: all @duration;

  .line {
    border-top: 5px solid @fg;
    height: 0;
    width: 60%;

    position: absolute;
    left: 50%;
    margin-left: -30%;

    transition: all @duration;
    transform: translate3d(0, -5px, 0);
  }

  .line:nth-child(1) {
    top: 35%;
  }

  .line:nth-child(2) {
    top: 50%;
  }

  .line:nth-child(3) {
    top: 65%;
  }
}

#m1 {
  &:hover {
    .line:nth-child(1) {
      border: 5px solid @fg;
      border-radius: 50%;
      width: 80%;
      height: 80%;
      top: 50%;
      left: 50%;
      margin: 0;
      margin-top: -40%;
      margin-left: -40%;
      transform: translate3d(-5px, -5px, 0);
    }

    .line:nth-child(2) {
      transform: 
        translate3d(0, -5px, 0) 
        rotate(90deg)
      ;
    }

    .line:nth-child(3) {
      top: 50%;
    }
  }
}

#m2 {
  .line:nth-child(1) {
    top: 35%;
  }

  .line:nth-child(2) {
    border-top: 2.5px solid @fg;
    border-bottom: 2.5px solid @fg;
    top: 50%;
  }

  .line:nth-child(3) {
    top: 65%;
  }

  &:hover {
    .line:nth-child(2) {
      border: 5px solid @fg;
      border-radius: 50%;
      width: 80%;
      height: 80%;
      top: 50%;
      left: 50%;
      margin: 0;
      margin-top: -40%;
      margin-left: -40%;
      transform: translate3d(-5px, -5px, 0);
    }

    .line:nth-child(1) {
      top: 50%;
      transform: 
        translate3d(0, -5px, 0) 
        rotate(45deg)
      ;
    }

    .line:nth-child(3) {
      top: 50%;
      transform: 
        translate3d(0, -5px, 0) 
        rotate(-45deg)
      ;
    }
  }
}

#m3 {
  &:hover {
    background: transparent;
    
    .line {
      border-color: @bg;
    }
    
    .line:nth-child(1) {
      border-width: 5px;
      border-style: solid;
      border-radius: 50%;
      width: 80%;
      height: 80%;
      top: 50%;
      left: 50%;
      margin: 0;
      margin-top: -40%;
      margin-left: -40%;
      transform: translate3d(-5px, -5px, 0);
    }

    .line:nth-child(2) {
      transform: 
        translate3d(0, -5px, 0) 
        rotate(90deg)
      ;
    }

    .line:nth-child(3) {
      top: 50%;
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.