Button by tarantino421
#e8e8e8
1.box { 2 --clr-shadow__border: #5987a3; 3 --clr-text: #F6F4EB; 4 --clr-rain: #192333; 5 --clr-raindrop: #E9F8F9; 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 background: transparent; 15 padding: calc(var(--size) / 3) var(--size); 16 border: none; 17 cursor: pointer; 18 color: var(--clr-text); 19 letter-spacing: 0.2rem; 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.rain { 25 width: 100%; 26 height: 100%; 27 bottom: 0%; 28 gap: 0.6rem; 29 z-index: -1; 30 opacity: 0; 31 transition: 0.5s ease-in-out; 32 overflow: hidden; 33 position: absolute; 34 display: flex; 35 background: var(--clr-rain); 36} 37 38.box:hover .rain { 39 opacity: 1; 40} 41 42.raindrop { 43 height: 1.4rem; 44 min-width: 0.1rem; 45 box-shadow: 60px 100px var(--clr-raindrop),-40px -90px var(--clr-raindrop); 46 background-color: var(--clr-raindrop); 47 animation: rain-animation calc(0.05s * var(--i)) linear infinite; 48 opacity: .3; 49} 50 51@keyframes rain-animation { 52 0% { 53 transform: rotate(20deg) translateY(calc(-100% * var(--i))); 54 } 55 56 100% { 57 transform: rotate(20deg) translateY(calc(100% * var(--i))); 58 } 59} 60 61 62 63 64 65 66 67
383 views
383 views
MIT License