Gradient Border
Dark UI · .btn-gradient-border
Text
Class name
Color hue
Radius · 12px
Size
.btn-gradient-border {
display: inline-block;
padding: 12px 26px;
border: 2px solid transparent;
border-radius: 12px;
background: linear-gradient(#0d1017, #0d1017) padding-box, linear-gradient(135deg, #f472b6, #818cf8) border-box;
color: #e2e8f0;
font-family: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: color 0.2s ease, box-shadow 0.2s ease;
}
.btn-gradient-border:hover {
background: linear-gradient(135deg, #f472b6, #818cf8) border-box;
color: #ffffff;
box-shadow: 0 6px 20px rgba(129, 140, 248, 0.4);
}
.btn-gradient-border:active {
box-shadow: none;
}