<div class="container">
  
  <div class="circle">
  <div class="line one"></div>
  <div class="line two"></div>
  </div>
    
</div>

body, html { min-height:100%; min-width:100%; height:100%; width:100%; padding:0; margin:0; background-color:DarkSeaGreen; }

.container {
  position:relative;
  width:100%;
  height:100%;
  padding:100px 0 0 0;
}

.circle {
  width:50px;
  height:50px;
  background-color:floralwhite;
  border-radius:25px;
  margin:auto;
  box-shadow:1px 1px 1px #565656;
  position:relative;
  transition:all .2s;
  &:hover {
    background-color:darken(darkseagreen, 10%);
    cursor:pointer;
  }
  &:hover > .one {
    height:45px;
    top:3px;
    transition: all .5s;
    background-color:floralwhite;
  }
  &:hover > .two {
    height:45px;
    top:3px;
    transition:all .5s;
    background-color:floralwhite;
  }
}

.line {
  height:20px;
  width:3px;
  border-radius:2px;
  background-color:darken(darkseagreen, 20%);
  position:absolute;
  transition: all .5s;
}

.one {
  top:15px;
  left:23px;
  transform:rotate(45deg)
}

.two {
  top:15px;
  left:23px;
  transform:rotate(-45deg)
}