Button by ALAllyhere
#212121
1.btn-donate { 2 --clr-font-main: hsla(0 0% 20% / 100); 3 --btn-bg-1: hsla(194 100% 69% / 1); 4 --btn-bg-2: hsla(217 100% 56% / 1); 5 --btn-bg-color: hsla(360 100% 100% / 1); 6 --radii: 0.5em; 7 cursor: pointer; 8 padding: 0.9em 1.4em; 9 min-width: 120px; 10 min-height: 44px; 11 font-size: var(--size, 1rem); 12 font-weight: 500; 13 transition: 0.8s; 14 background-size: 280% auto; 15 background-image: linear-gradient( 16 325deg, 17 var(--btn-bg-2) 0%, 18 var(--btn-bg-1) 55%, 19 var(--btn-bg-2) 90% 20 ); 21 border: none; 22 border-radius: var(--radii); 23 color: var(--btn-bg-color); 24 box-shadow: 25 0px 0px 20px rgba(71, 184, 255, 0.5), 26 0px 5px 5px -1px rgba(58, 125, 233, 0.25), 27 inset 4px 4px 8px rgba(175, 230, 255, 0.5), 28 inset -4px -4px 8px rgba(19, 95, 216, 0.35); 29} 30 31.btn-donate:hover { 32 background-position: right top; 33} 34 35.btn-donate:is(:focus, :focus-visible, :active) { 36 outline: none; 37 box-shadow: 38 0 0 0 3px var(--btn-bg-color), 39 0 0 0 6px var(--btn-bg-2); 40} 41 42@media (prefers-reduced-motion: reduce) { 43 .btn-donate { 44 transition: linear; 45 } 46} 47
17K views
MIT License