پیشنمایش زنده
کد HTML
<div class="center">
<button class="btn">
<svg viewBox="0 0 150 50" height="50px" width="150px" class="svg">
<polyline class="bg-line" points="149,1 149,49 1,49 1,1 149,1"></polyline>
<polyline class="hl-line" points="149,1 149,49 1,49 1,1 149,1"></polyline>
</svg>
<span>HOVER ME</span>
</button>
</div>
کد CSS
.center {
width: 150px;
height: 50px;
position: relative;
}
.btn {
width: 100%;
height: 100%;
cursor: pointer;
background: transparent;
border: 1px solid #91c9ff;
outline: none;
transition: 1s ease-in-out;
}
.svg {
position: absolute;
left: 0;
top: 0;
fill: none;
stroke: #fff;
stroke-dasharray: 150 480;
stroke-dashoffset: 150;
transition: 1s ease-in-out;
}
.btn:hover {
transition: 1s ease-in-out;
background: #4f95da;
}
.btn:hover .svg {
stroke-dashoffset: -480;
}
.btn span {
color: white;
font-size: 17px;
font-weight: 100;
}