Артем

:after или :before
У кнопки позиционирование relative, у :after (или :before) - absolute
Устанавливаете left: 0 и bottom: 0
width: 20px, например
При наведении через :hover устанавливаете width: 100%

transition: 1s width - чтобы плавно было

Линия - это просто блок с размерами и черным фоном.
Чтобы добиться такого эффекта, достаточно воспользоваться свойствами
position: absolute; left: N; top: N; - чтобы убрать ее за пределы экрана
transform: rotate(45deg); - чтобы повернуть ее на нужный угол (в данном случае 45 градусов)
transition: 2s width; - чтобы анимировать изменение ширины
А после загрузки страницы запустить js скрипт, который задаст новую ширину линии, такую, чтобы она вылезла из-за границы экрана

window.onload = function () {
  var line = document.querySelector('#line');
  if (line) {
    line.style.width = '100px';
  }
}

Используя это, достаточно просто будет усложнить анимацию так, как вам хочется.