Как определить элемент html, чтобы он имел форму многоугольника, и как изменить форму с помощью анимации?

Question

Я пытаюсь создать эту кнопку в html с небольшой анимацией, как показано ниже.

Как сделать форму многоугольника ниже в css и как переместить ее в обычный прямоугольник в анимация при наведении?

Это то, что я пытаюсь сделать так, чтобы это выглядело:

А вот как это должно выглядеть при наведении:

Спасибо за любую помощь

Answer 1

Немного грязно, но это то, что я до сих пор получаю:

body {
background-color: #FFB504;
}
.cta {
  color: white;
  border: none;
  width: 240px;
  height: 80px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  font-family: sans-serif;
  cursor: pointer;
  position:relative;
  background-color: transparent;
  outline: none;
}
.cta-content {
padding-right: 20px;
  transition: all .3s ease;
  z-index:1;
}

.cta:before {
 clip-path: polygon(10px 10px, 230px 10px, 190px 70px, 10px 70px);
  transition: all .3s ease;
  will-change: clip-path;
    background-color: #0081B1;

}
.cta-border, .cta-border:before, .cta-border:after, .cta:before {
content: "";
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all .3s ease;
 }
 .cta-border{
 overflow: hidden;
 }
.cta-border:before {
  
   clip-path: polygon(0px 0px, 220px 0px, 170px 80px, 0px 80px);
   border: 2px solid white;

}
.cta-border:after {
transform-origin: center center;
transform: translate(-28px, -69px) rotate(32deg);
border-right: 2px solid white;
height: 94.34px;
}
.cta:hover .cta-content {
padding-right: 0;
}
.cta:hover:before, .cta:hover .cta-border:before {
clip-path: polygon( 0px 0px, 240px 0px, 240px 80px, 0px 80px);
}

.cta:hover .cta-border:after {
  transform: translate(0,0) rotate(0);
}

<button class="cta">
<span class="cta-content">HIRE ME</span>
<span class="cta-border"></span>
</button>