Анимация линий при наведении на кнопку

body { 
  background: url('https://i.stack.imgur.com/NH9hp.png'); 
} 
 
.button { 
  position: relative; 
  width: 50px; 
  height: 50px; 
  margin: 100px 5px 0; 
  border-radius: 50%; 
  background: #ffa60e; 
} 
 
.button:hover .line { 
  animation: .8s linear forwards draw_line; 
} 
 
.line { 
  position: absolute; 
  width: 0px; 
  height: 0px; 
  bottom: 50%; 
  left: 130%; 
  border-bottom: 1px solid rgba(255, 255, 255); 
  border-right: 1px solid rgba(255, 255, 255); 
  opacity: 0.0; 
  transition: opacity 2s ease; 
} 
 
.dot { 
  position: absolute; 
  width: 7px; 
  height: 7px; 
  border-radius: 50%; 
  background: rgba(255, 255, 255); 
} 
 
.start { 
  bottom: calc(0% - 4px); 
  left: calc(0% - 3px); 
} 
 
.angle { 
  bottom: calc(0% - 4px); 
  left: calc(100% - 3px); 
} 
 
.final { 
  bottom: calc(100% - 4px); 
  left: calc(100% - 3px); 
} 
 
@keyframes draw_line { 
  0% { 
    width: 0px; 
    height: 0px; 
    opacity: 0.0; 
  } 
  1% { 
    width: 0px; 
    opacity: 0.5; 
  } 
  65% { 
    width: 240px; 
    height: 0px; 
  } 
  100% { 
    width: 240px; 
    height: 60px; 
    opacity: 0.5; 
  } 
}

<div class="button"> 
  <div class="line"><b class="dot start"></b><b class="dot angle"></b><b class="dot final"></b></div> 
</div>

body { 
  background: url('https://i.stack.imgur.com/NH9hp.png'); 
} 
 
.button { 
  position: relative; 
  width: 50px; 
  height: 50px; 
  margin: 50px auto -40px; 
  border-radius: 50%; 
  background: #ffa60e; 
} 
 
.line_right { 
  pointer-events: none; 
  position: absolute; 
  width: 0px; 
  height: 0px; 
  bottom: 50%; 
  left: 130%; 
  border-bottom: 1px solid rgba(255, 255, 255); 
  border-right: 1px solid rgba(255, 255, 255); 
  opacity: 0.0; 
  transition-property: opacity, width, height; 
  transition-duration: 0.5s, 0.0s, 0.0s; 
  transition-delay: 0.0s, 0.3s, 0.3s; 
  transform-origin: bottom left; 
  /* раскомментировать для "вправо-и-вниз" */ 
  /* transform: scale(1, -1); */ 
} 
.button:hover .line_right { 
  width: 240px; 
  height: 60px; 
  opacity: 0.5; 
  transition-property: opacity, width, height; 
  transition-duration: 0.1s, 0.6s, 0.2s; 
  transition-delay: 0.0s, 0.1s, 0.7s; 
} 
 
.line_bottom { 
  pointer-events: none; 
  position: absolute; 
  width: 0px; 
  height: 0px; 
  bottom: 50%; 
  left: 130%; 
  border-bottom: 1px solid rgba(255, 255, 255); 
  border-right: 1px solid rgba(255, 255, 255); 
  opacity: 0.0; 
  transition-property: opacity, width, height; 
  transition-duration: 0.5s, 0.0s, 0.0s; 
  transition-delay: 0.0s, 0.3s, 0.3s; 
  transform-origin: bottom left; 
  /* transform: rotate(90deg); "вниз-и-вправо" */ 
  transform: rotate(90deg) scale(1, -1);/* "вниз-и-влево" */ 
} 
.button:hover .line_bottom { 
  width: 60px; 
  height: 240px; 
  opacity: 0.5; 
  transition-property: opacity, width, height; 
  transition-duration: 0.1s, 0.2s, 0.6s; 
  transition-delay: 0.0s, 0.1s, 0.3s; 
} 
 
.dot { 
  position: absolute; 
  width: 7px; 
  height: 7px; 
  border-radius: 50%; 
  background: rgba(255, 255, 255); 
} 
.start { 
  bottom: calc(0% - 4px); 
  left: calc(0% - 3px); 
} 
.angle { 
  bottom: calc(0% - 4px); 
  left: calc(100% - 3px); 
} 
.final { 
  bottom: calc(100% - 4px); 
  left: calc(100% - 3px); 
}

<div class="button"> 
  <div class="line_right"><b class="dot start"></b><b class="dot angle"></b><b class="dot final"></b></div> 
</div> 
<div class="button"> 
  <div class="line_bottom"><b class="dot start"></b><b class="dot angle"></b><b class="dot final"></b></div> 
</div>