#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-family: "Segoe UI", system-ui, sans-serif; 13 font-weight: 500; 14 transition: 0.8s; 15 background-size: 280% auto; 16 background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%); 17 border: none; 18 border-radius: var(--radii); 19 color: var(--btn-bg-color); 20 box-shadow: 0px 0px 20px rgba(71, 184, 255, 0.5), 0px 5px 5px -1px rgba(58, 125, 233, 0.25), inset 4px 4px 8px rgba(175, 230, 255, 0.5), inset -4px -4px 8px rgba(19, 95, 216, 0.35); 21} 22 23.btn-donate:hover { 24 background-position: right top; 25} 26 27.btn-donate:is(:focus, :focus-visible, :active) { 28 outline: none; 29 box-shadow: 0 0 0 3px var(--btn-bg-color), 0 0 0 6px var(--btn-bg-2); 30} 31 32@media (prefers-reduced-motion: reduce) { 33 .btn-donate { 34 transition: linear; 35 } 36} 37
6.8K views
6.8K views
Comments
MIT License