Button by tarantino421
#e8e8e8
1.box { 2 --clr-shadow__border: #0096fa; 3 --clr-text: #F6F4EB; 4 --clr-snowflake: #F6F4EB; 5 --clr-snowfall: #91C8E4; 6 --size: 3rem; 7 position: relative; 8 outline: 1px solid var(--clr-shadow__border); 9} 10 11.button { 12 font-weight: 600; 13 font-size: 1.5rem; 14 letter-spacing: 0.2rem; 15 padding: calc(var(--size) / 3) var(--size); 16 background: transparent; 17 border: none; 18 cursor: pointer; 19 color: var(--clr-text); 20 text-shadow: 2px 0px var(--clr-shadow__border), 0px 2px var(--clr-shadow__border), 21 -2px 0px var(--clr-shadow__border), 0px -2px var(--clr-shadow__border); 22} 23 24.snowfall { 25 width: 100%; 26 height: 100%; 27 bottom: 0%; 28 gap: 0.3rem; 29 transition: 0.5s ease-in-out; 30 z-index: -1; 31 opacity: 0; 32 position: absolute; 33 display: flex; 34 justify-content: center; 35 align-items: center; 36 overflow: hidden; 37 background: linear-gradient( to bottom, var(--clr-snowfall), #ffffff); 38} 39 40.box:hover .snowfall { 41 opacity: 1; 42} 43 44.snowflake { 45 height: 0.3rem; 46 width: 0.3rem; 47 box-shadow: -30px -50px var(--clr-snowflake); 48 background-color: var(--clr-snowflake); 49 animation: snowfall-animation calc(0.1s * var(--i)) linear infinite; 50 opacity: 1; 51} 52 53@keyframes snowfall-animation { 54 0% { 55 transform: translateY(calc(-103% * var(--i))); 56 } 57 58 100% { 59 transform: translateY(calc(100% * var(--i))); 60 opacity: 0; 61 } 62} 63 64 65 66 67 68 69 70
470 views
470 views
MIT License