SVG Button Hover Effect

HTML
<button> <svg viewBox="0 0 180 60"> <path d="M180,60 0,60 0,0 180,0z"></path> </svg><span>Hover me!</span> </button>
CSS
body { display: flex; align-items: center; justify-content: center; background: #403A3E; background: linear-gradient(to left, #403A3E , #BE5869); height: 100vh; overflow: hidden; } button { position: relative; background: none; text-transform: uppercase; border: none; padding: 0; color: rgba(255, 255, 255, 0.7); outline: none; transition: color .3s; cursor: pointer; } button svg { width: 180px; height: 60px; fill: none; stroke: #bdc3c7; stroke-dasharray: 0, 0, 480px, 480px; stroke-width: 8; transition: stroke-dasharray .3s; } button span { display: block; position: absolute; top: 0; left: 0; width: 100%; line-height: 60px; letter-spacing: 4px; } button:hover, button:focus { color: #ecf0f1; } button:hover svg, button:focus svg { stroke-dasharray: 180px, 300px; }
JAVASCRIPT
Expand for more options Login