How to define an html element to have a polygon shape, and how to change the shape with animation?

I am trying to create this button in html with a little animation as below.

How can I make the below polygon shape in css, and how to move it to a regular rectangle in animation on hover?

This is what I am trying to make it look like:

And here is how it should look like on hover:

Thanks for any help