پیشنمایش زنده
کد HTML
<button class="btn">
<svg>
<defs>
<linearGradient id="gradiant">
<stop stop-color="#FF8282" offset="0%"></stop>
<stop stop-color="#E178ED" offset="100%"></stop>
</linearGradient>
</defs>
<rect height="50" width="150" stroke="url(#gradiant)" fill="none"></rect>
</svg>
<span>Button</span>
</button>
کد CSS
.btn {
position: relative;
display: inline-block;
width: 150px;
height: 50px;
text-align: center;
text-transform: uppercase;
background-color: transparent;
cursor: pointer;
font-weight: 900;
font-size: 17px;
border: none;
outline: none;
}
.btn svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.btn svg rect {
stroke-width: 3;
stroke-dasharray: 0,0;
stroke-dashoffset: 0;
-webkit-transition: all .6s ease;
transition: all .6s ease;
}
.btn span {
background: rgba(255,130,130,1);
background: linear-gradient(to right, rgba(255,130,130,1) 0%,rgba(225,120,237,1) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.btn:hover svg rect {
stroke-width: 4;
stroke-dasharray: 196, 543;
stroke-dashoffset: 437;
}