How to make a gradient on the button and set the gradient eternal animation?

-Make a gradient turned out, but make it move does not work ... tell me where I made a mistake?

#header-button { font-size: 12px; font-weight: bold; height: 50px; width: 171px; background-color: #998675; outline: 0; border: 0; border-radius: 5px; border-bottom: 3px solid #736357; cursor: pointer; margin-top: 30px; color: #fff; background-image: linear-gradient(-45deg, #998675 50%, #fff); -webkit-animation: gradient 3s linear infinite; animation: gradient 3s linear infinite; } @-webkit-keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50% } } 
 <button id="header-button"> GET STARTED </button>

  • Add the code from html - Kosta B.
  • <button id = "header-button"> GET STARTED </ button> - L1ght_time
  • Firstly, it is not clear what you want to do ... Secondly, there is an error in the name of the animation ... Different names ... - Air
  • This has already been fixed, but it still does not work ... - L1ght_time
  • I want a white gradient to go through the button, every time interval - L1ght_time

1 answer 1

I would implement it like this ...

 #button-wrap { overflow: hidden; position: relative; height: 50px; width: 171px; } #header-button { position: absolute; height: 150px; width: 371px; outline: none; border: none; left: -200px; background-image: linear-gradient(-45deg, #998675 10%, #fff, #998675); animation: gradient 3s ease infinite; } @keyframes gradient { 0% { left: -200px; } 50% { left: 0px; } 100% { left: -200px; } } 
 <div id="button-wrap"> <button id="header-button"></button> </div>

Option two, as I understand it, the author of this sought to ..

 #button-wrap { overflow: hidden; position: relative; height: 50px; width: 171px; } p { font-size: 12px; font-weight: bold; height: 100%; width: 100%; text-align: center; line-height: 2; color: #fff; position: absolute; } #header-button { position: absolute; height: 150px; width: 571px; outline: none; border: none; left: -400px; top: -100px; background-image: linear-gradient(-45deg, #998675 50%, #fff, #998675 55%); animation: gradient 3s ease infinite; } @keyframes gradient { 0% { left: -400px; top: -100px; } 100% { left: 0; top: -10px; } } 
 <div id="button-wrap"> <button id="header-button"> </button> <p>GET STARTED</p> </div>

  • Thank you very much, you really helped!) - L1ght_time
  • You ... - Air