<a href="#" class="btn">
<span>Button</span>
<svg
class="btn-line"
viewBox="0 0 160 60"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none">
<rect />
</svg>
</a>
* {
box-sizing: border-box;
}
.btn {
text-decoration: none;
font-size: 16px;
line-height: 1;
font-family: sans-serif;
display: inline-flex;
align-items: center;
justify-content: center;
background: #000;
color: #fff;
height: 50px;
border-radius: 25px;
padding: 10px 30px;
position: relative;
margin: 20px;
min-width: 150px;
}
.btn-line {
position: absolute;
top: -5px;
left: -5px;
width: calc(100% + 10px);
height: calc(100% + 10px);
}
.btn-line rect {
fill: none;
stroke: #000;
width: calc(100% - 1px);
height: calc(100% - 1px);
rx: calc(30px);
x: .5;
y: .5;
stroke-dasharray: 100;
animation: dash 5s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: 1000;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.