<div class="container">
  <div class="dot"></div>
</div>

$size: 45px;

body {
  background: black;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: $size;
  height: $size;
  cursor: pointer;
}

.dot {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: $size / 5;
  height: $size / 5;
  background: white;
  border-radius: 50%;
  transition: all 0.35s ease;
  backface-visibility: hidden;
  
  .container.hover & {
    background: transparent;
  }
  
  &::before, &::after {
    display: block;
    content: '';
    position: absolute;
    bottom: 0;
    background: white;
    width: $size / 5;
    height: $size / 5;
    border-radius: 50%;
    transition: all 0.35s ease;
    
    .container.hover & {
      height: $size;
      border-radius: 0;
    }
  }
  
  &::before {
    left: -(($size / 5) * 2);
    
    .container.hover & {
      transform: rotate(45deg);
      transform-origin: right bottom;
      border-radius: $size / 5;
    }
  }
  
  &::after {
    right: -(($size / 5) * 2);
    
    .container.hover & {
      transform: rotate(-45deg);
      transform-origin: left bottom;
      border-radius: $size / 5;
    }
  }
}

$('.container').click('on', function() {
  $(this).toggleClass('hover');
});