Button animation on site with html and css-CodePudding

Guys please aid me to solve this problem . As you can see, the back of this button is being colored live . without clicking on it or hover on it. How can I do this with html and css? I think about i need JavaScript or SVG . video link is here:' https://amirmora801.wistia.com/projects/ryy7wy74ls '

CodePudding user response：

try this :

html :

       * {
            box-sizing: border-box;
        }
        html,body {
            padding: 0;
            margin: 0;
            margin-top: 20px;
            background: #000;
            display: flex;
            justify-content: center;
        }

        /*  HERE STARTS THE CODE FOR CIRCLE GRADIENT  */
        .container {
            width: 400px;
            height: 150px;
            background: red;
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(45deg, 
            #ff0000, 
            #ff9900, 
            #eeff00, 
            #00ff2a, 
            #1100ff, 
            #d700f3,
            #00f320,
            #b40c00,
            #ffd901, 
            #f3003d);
            background-size: 400%;
            animation: animate 5s linear infinite;
        }

        .inner {
            width: 390px;
            height: 140px;
            background: black;
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .inner h1 {
            margin: 0;
            color: white;
            font-size: 40px;
        }
        


        /* Keyframes doing the animation */
        /*  If you want to make it animate faster, make the "5s" less -(seconds)  */
        @keyframes animate {
        0% {
            background-position: 0%;
        }
        100% {
            background-position: 400%;
        }
        }

<div >
  <div >
    <h1>Gradient Animation</h1>
  </div>
</div>

you can create it without js.

go and try this ! an example : https://codepen.io/MJ-Media/pen/yZyPJy "click here for an live example"