Кнопка с анимацией.
<a href="#" class="btn">
<svg width="210" height="60">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="#F0583A"/>
<stop offset="100%" stop-color="#F0583A" />
</linearGradient>
</defs>
<rect x="5" y="5" rx="25" fill="none" stroke="url(#grad1)" width="200" height="50"></rect>
</svg>
<span>Отправить</span>
</a>
<style>
.btn {
position: relative;
display: inline-block;
width: 210px;
height: 60px;
font-size: 1em;
font-weight: bold;
line-height: 60px;
text-align: center;
text-transform: uppercase;
background-color: transparent;
cursor: pointer;
text-decoration: none;
font-family: 'TildaSans', sans-serif;
font-weight: 900;
font-size: 17px;
letter-spacing: 0.045em;
}
.btn svg {
position: absolute;
top: 0;
left: 0;
}
.btn svg rect {
stroke-width: 4;
stroke-dasharray: 353, 0;
stroke-dashoffset: 0;
-webkit-transition: all 600ms ease;
transition: all 600ms ease;
}
.btn span{
background: #F0583A;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.btn:hover svg rect {
stroke-width: 4;
stroke-dasharray: 132, 543; /*первое значение отвечает за длину нижнего бордера в конце анимации*/
stroke-dashoffset: 437;
}
</style>