Button by JaydipPrajapati1910
#e8e8e8
1.button { 2 font-size: 19px; 3 border-radius: 12px; 4 background: linear-gradient(180deg, rgb(56, 56, 56) 0%, rgb(36, 36, 36) 66%, rgb(41, 41, 41) 100%); 5 color: rgb(218, 218, 218); 6 border: none; 7 padding: 2px; 8 font-weight: 800; 9 cursor: pointer; 10 position: relative; 11 overflow: hidden; 12} 13 14.button span { 15 border-radius: 10px; 16 padding: 0.8em 1.3em; 17 padding-right: 1.2em; 18 text-shadow: 0px 0px 20px #4b4b4b; 19 width: 100%; 20 display: flex; 21 align-items: center; 22 gap: 12px; 23 transition: all 0.3s; 24 background-image: linear-gradient(to right, #00F260, #f79dee, #0575E6, #64f38c,#e9e93e); 25 -webkit-background-clip: text; 26 color: transparent; 27 background-size: 300%; 28 background-position: -100%; 29 animation: animatedText 3s infinite alternate-reverse; 30} 31 32.button-overlay { 33 position: absolute; 34 inset: 0; 35 pointer-events: none; 36 background: repeating-conic-gradient(rgb(48, 47, 47) 0.0000001%, rgb(51, 51, 51) 0.000104%) 60% 60%/600% 600%; 37 filter: opacity(10%) contrast(105%); 38 -webkit-filter: opacity(10%) contrast(105%); 39} 40 41@keyframes animatedText { 42 to { 43 background-position: 100%; 44 } 45}
931 views
931 views
MIT License