<body>
<a class="borderAnimation" href="#">Gradient border animation</a>
</body>
body{
align-items: center;
background: #000;
display: flex;
font-family: sans-serif;
justify-content: center;
height: 100vh;
width: 100vw;
}
.borderAnimation:after {
content: '';
position: absolute;
top: calc(-1 * var(--borderWidth));
left: calc(-1 * var(--borderWidth));
height: calc(100% + var(--borderWidth) * 2);
width: calc(100% + var(--borderWidth) * 2);
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
border-radius: calc(2 * var(--borderWidth));
z-index: -1;
animation: animatedgradient 3s ease alternate infinite;
background-size: 300% 300%;
}
a{
padding:10px;
border-image: linear-gradient(to right, rgb(0, 210, 255), rgb(58, 123, 213));
border-image-slice: 1;
color: white;
margin: auto;
border-top:none!important;
text-decoration: none;
--borderWidth: 3px;
background: #000;
position: relative;
border-radius: var(--borderWidth);
}
@keyframes animatedgradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.