291
CSS Gradient Border Animation
In this blog post, I will show you how to create a CSS gradient border animation for your web elements. This is a simple and elegant effect that can add some flair and interactivity to your website.
Here is an example of how to use these properties to create a css gradient border animation
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS gradient border animation</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="button gradient-border">
<button class="text">Start Now </button>
</div>
</body>
</html>
CSS
body {
background: #1D1F20;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
button {
background: #1D1F20;
color: #fff;
cursor: pointer;
border: none;
font-size: 25px;
font-family: verdana;
letter-spacing: 10px;
text-align: center;
padding: 5px;
text-transform: uppercase;
}
.text {
text-shadow: -1px 2px 1px cyan,
-1px 2px 1px white;
}
.button {
display: inline-block;
cursor: pointer;
outline: 0;
white-space: nowrap;
margin: 5px;
padding: 15px 65px;
height: 55px;
line-height: 40px;
background-color: #1D1F20;
}
.gradient-border {
background: #1D1F20;
position: relative;
border-radius: 30px;
}
.gradient-border:after {
content: '';
position: absolute;
top: -3px;
left: -3px;
height: calc(100% + 6px);
width: calc(100% + 6px);
background: linear-gradient(45deg, #fda085, #f6d365, #1de840, #1ddde8, #dd00f3, #FF00FF);
border-radius: 30px;
z-index: -1;
animation: animatedgradient 5s ease alternate infinite;
background-size: 600% 600%;
box-shadow: 0 0 30px 10px #000;
}
@keyframes animatedgradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
For More Tutorials Please Click Here
