Button by tarantino421
#212121
1.box { 2 --clr-shadow__border: #A8DF8E; 3 --clr-text: #F6F4EB; 4 --clr-code-line: #43ff85; 5 --clr-matrix: #020204; 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 color: var(--clr-text); 16 padding: calc(var(--size) / 3) var(--size); 17 background: transparent; 18 border: none; 19 cursor: pointer; 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.matrix { 25 width: 100%; 26 height: 100%; 27 bottom: 0%; 28 transition: 0.5s ease-in-out; 29 z-index: -1; 30 opacity: 0; 31 display: flex; 32 justify-content: center; 33 align-items: center; 34 overflow: hidden; 35 position: absolute; 36 background: var(--clr-matrix); 37} 38 39.box:hover .matrix { 40 opacity: 1; 41} 42 43.code-line { 44 position: relative; 45 display: flex; 46 flex-direction: column-reverse; 47 transition: 0.5s; 48 min-height: 0.6rem; 49 min-width: 0.6rem; 50 animation: matrix-animation calc(.2s * var(--i)) linear infinite; 51} 52 53.code { 54 text-shadow: 20px 100px var(--clr-code-line),-20px -50px var(--clr-code-line); 55 font-size: 0.8rem; 56 font-weight: 400; 57 color: var(--clr-code-line); 58 opacity: 0.5; 59} 60 61.code:first-child { 62 color: var(--clr-text); 63 opacity: 1; 64} 65 66@keyframes matrix-animation { 67 0% { 68 transform: translateY(calc(-50% * var(--i))); 69 } 70 71 100% { 72 -webkit-transform: translateY(calc(50% * var(--i))); 73 transform: translateY(calc(50% * var(--i))); 74 } 75} 76 77 78 79 80 81 82 83
712 views
712 views
Valerio-0 6. February at 15:32
6. February at 15:32
best! 🚀
MIT License