3.2K views
1/* this button is inspired from this -- https://www.newline.co/pricing */ 2button { 3 --width: 150px; 4 --timing: 2s; 5 border: 0; 6 width: var(--width); 7 padding-block: 1em; 8 color: #fff; 9 font-weight: bold; 10 font-size: 1em; 11 background: rgb(64, 192, 87); 12 transition: all 0.2s; 13 border-radius: 3px; 14} 15 16button:hover { 17 background-image: linear-gradient(to right, rgb(250, 82, 82), rgb(250, 82, 82) 16.65%, rgb(190, 75, 219) 16.65%, rgb(190, 75, 219) 33.3%, rgb(76, 110, 245) 33.3%, rgb(76, 110, 245) 49.95%, rgb(64, 192, 87) 49.95%, rgb(64, 192, 87) 66.6%, rgb(250, 176, 5) 66.6%, rgb(250, 176, 5) 83.25%, rgb(253, 126, 20) 83.25%, rgb(253, 126, 20) 100%, rgb(250, 82, 82) 100%); 18 animation: var(--timing) linear dance6123 infinite; 19 transform: scale(1.1) translateY(-1px); 20} 21 22@keyframes dance6123 { 23 to { 24 background-position: var(--width); 25 } 26} 27 28
satyamchaudharydev
satyam
MIT License