.container {
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: center;
margin: 0;
}
.gradient-border-btn {
width: 100%;
position: relative;
padding: 10px 20px;
font-size: 16px;
color: #0b380b !important;
background: transparent;
border: 2px solid transparent;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
border-radius: 50px;
z-index: 1;
}
.gradient-border-btn::before {
content: “”;
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
background: linear-gradient(
10deg,
#c0e9fd,
#fce5f6,
#c0e9fd,
#fce5f6,
#c0e9fd
);
background-size: 200% 200%;
border-radius: 50px;
z-index: -1;
animation: gradient-move 1s linear infinite;
}
.gradient-border-btn::after {
content: “”;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(“https://uba.sch.id/wp-content/uploads/2024/12/beams-home@95-150×150.jpg”);
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
/* background: linear-gradient(90deg, #c0e9fd, #fce5f6); */
border-radius: 50px;
z-index: -1;
}
@keyframes gradient-move {
0% {
background-position: 0% 50%;
}
100% {
background-position: 200% 50%;
}
}