Edit on
<p>Simple CSS hover icons by Joacim Nilsson</p>
<div id="icons">
  <ico class="jn-upload"><n></n></ico>
  <ico class="jn-download"><n></n></ico>
  <ico class="jn-list"><n></n></ico>
  <ico class="jn-sun"><n></n></ico>
</div>
body {
  background:#414f56;
}
p {
  width:260px;
  text-align:center;
  margin:90px auto 10px;
  height:50px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  color:white;
  font-size:14px;
  line-height:24px;
  &:first-line {
    font-size:24px;
  }
}
#icons {
  height:80px;
  width:290px;
  margin:0 auto;
  
}
ico {
  display:block;
  width:40px;
  height:60px;
  margin-left:25px;
  position:relative;
  background:#414f56;
  overflow:hidden;
  cursor:pointer;
  float:left;
  /* UPLOAD ICON */
  &.jn-upload {
    &:after {
      box-sizing:border-box;
      display:block;
      content:"";
      width:40px;
      height:40px;
      border:2px solid white;
      border-radius:5px;
      position:absolute;
      bottom:0;
    }
    &:hover {
      n {
        transform:translateY(2px);
      }
    }
    n {
      display:block;
      width:2px;
      height:38px;
      background:white;
      position:absolute;
      left:50%;
      margin-left:-1px;
      transform:translateY(60px);
      transition:0.4s;
      &:after, &:before {
        content:"";
        width:2px;
        height:17.5px;
        background:white;
        position:absolute;
        top:0;
        left:0;
        transform-origin:0 0;
        transform:rotate(-45deg);
      }
      &:before {
        transform-origin:2px 0px;
        transform:rotate(45deg);
      }
    }
  }
  /* DOWNLOAD ICON */
  &.jn-download {
    &:after {
      box-sizing:border-box;
      display:block;
      content:"";
      width:40px;
      height:40px;
      border:2px solid white;
      border-radius:5px;
      position:absolute;
      bottom:0;
    }
    &:hover {
      n {
        transform:translateY(2px);
      }
    }
    n {
      display:block;
      width:2px;
      height:38px;
      background:white;
      position:absolute;
      left:50%;
      margin-left:-1px;
      transform:translateY(60px);
      transition:0.4s;
      &:after, &:before {
        content:"";
        width:2px;
        height:17.5px;
        background:white;
        position:absolute;
        bottom:-1px;
        left:0;
        transform-origin:0px 16px;
        transform:rotate(-45deg);
      }
      &:before {
        transform-origin:2px 16px;
        transform:rotate(45deg);
      }
    }
  }
  /* LIST ICON */
  &.jn-list {
    &:after {
      box-sizing:border-box;
      display:block;
      content:"";
      width:40px;
      height:40px;
      border:2px solid white;
      border-radius:5px;
      position:absolute;
      bottom:0;
    }
    &:hover {
      n {
        transform:translateX(0px);
        &:after, &:before {
          transform:translateX(0px);
        }       
      }
    }
    n {
      display:block;
      width:15px;
      height:2px;
      background:white;
      position:absolute;
      top:33px;
      left:15px;
      transition:0.4s;
      transform:translateX(-30px);
      box-shadow:
        -3px 0 0 #414f56,
        -5px 0 0 white
      ;
      &:after, &:before {
        content:"";
        width:15px;
        height:2px;
        background:white;
        position:absolute;
        top:6px;
        transition:0.4s;
        transition-delay:0.2s;
        transform:translateX(-30px);
        box-shadow:
          -3px 0 0 #414f56,
          -5px 0 0 white
        ;
      }
      &:before {
        top:12px;
        transition-delay:0.4s;
      }
    }
  }
  /* SUN ICON */
  &.jn-sun {
    z-index:3;
    &:after {
      box-sizing:border-box;
      display:block;
      content:"";
      width:26px;
      height:26px;
      border:2px solid white;
      border-radius:20px;
      position:absolute;
      bottom:8px;
      left:7px;
      background:#414f56;
    }
    &:before{
      display:block;
      content:"";
      width:32px;
      height:2px;
      position:absolute;
      bottom:23px;
      left:1px;
      background:transparent;
      transform:rotate(-45deg) rotatey(90deg);
      transform-origin:22.5px 4px;
      border-left:4px solid white;
      border-right:4px solid white;
      transition:0.4s;
    }
    &:hover {
      &:after {
        
      }
      &:before {
        transform:rotate(-45deg) rotatey(0deg);
      }
      n {
        transform:rotatey(0deg);
        &:after {
          transform:rotate(45deg) rotatey(0deg);
        }   
        &:before {
          transform:rotate(90deg) rotatey(0deg);
        }   
      }
    }
    n {
      display:block;
      width:32px;
      height:2px;
      position:absolute;
      top:39px;
      left:0px;
      border-left:4px solid white;
      border-right:4px solid white;
      transition:0.4s;
      transform:rotatey(90deg);
      z-index:-3;
      &:after, &:before {
        content:"";
        transition:0.4s;
        width:33px;
        height:2px;
        top:0px;
        left:-8px;
        background:transparent;
        position:absolute;
        transform:rotate(45deg) rotatey(90deg);
        transform-origin:22.5px 4px;
        border-left:4px solid white;
        border-right:4px solid white;
       
      }
      &:before {
        transform:rotate(90deg) rotatey(90deg);
        transform-origin:22px 3px;
        top:-1px;
        left:-8px;
        width:32px;
        border-left:4px solid white;
        border-right:4px solid white;
      }
    }
  }
}
View Compiled
Rerun