1.2K
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