<button>
<svg viewBox="0 0 220 80">
<rect width="100%" height="100%" fill="none" />
</svg>
<span>Оставить заявку</span>
</button>
<br>
Наведи курсор на кнопку
button {
display: block;
background: none;
border: none;
position: relative;
outline: none;
width: 220px;
height: 80px;
cursor: pointer;
}
button svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
stroke-dasharray: 70 75;
stroke-dashoffset: 20;
stroke: #000;
stroke-width: 2;
}
button span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
button:hover svg {
animation: stroke 1s linear alternate infinite;
}
@keyframes stroke {
0% {
stroke-dashoffset: -300px;
stroke: green;
}
100% {
stroke-dashoffset: 300px;
stroke: orange;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.