Animated Sliders Icon

Animated Sliders Icon.markdown

Animated Sliders Icon

A Pen by Alec Ortega on CodePen.

License.

index.jade

.options-icon
  .line-container
    .line
    .circle
  .line-container
    .line
    .circle
  .line-container
    .line
    .circle

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

style.scss

html, body {
  display: flex; 
  justify-content: center;
  align-items: center;
  background-color: #45729A;
  height: 100%;
}

.options-icon {
  cursor: pointer;
  width: 50px;
  
  &:hover {
    .circle, .line {
      background-color: #FFF;
    }
    .line-container:nth-child(1) .circle {
      transform: translateX(-30px);
    }

    .line-container:nth-child(2) .circle {
      transform: translateX(30px);
    }

    .line-container:nth-child(3) .circle {
      transform: translateX(-5px);
    }
  }
}

.line-container {
  margin: 11px 0;
  position: relative;
}

.line {
  height: 4px;
  background-color: #2F4C65;
  border-radius: 2px;
  transition: all 0.25s ease-in-out;
}

.circle {
  height: 10px;
  width: 10px;
  position: absolute;
  background-color: #2F4C65;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  transition: all 0.25s ease-in-out;
  
  .line-container:nth-child(1) & {
    right: 5px;
  }
  
  .line-container:nth-child(2) & {
    left: 5px;
  }
  
  .line-container:nth-child(3) & {
    left: 50%;
    margin-left: -4px;
  }
}