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;
}
1 Response
To run again you have to refresh the page. ;)