Form by KhelVers
#212121
1#Container { 2 display: flex; 3 flex-direction: column; 4 align-items: center; 5 justify-content: flex-end; 6 height: 100%; 7} 8 9#rays { 10 z-index: 2; 11 position: relative; 12 bottom: -1.5em; 13 animation: rays 2s ease-in-out infinite; 14} 15 16.form { 17 position: relative; 18 top: 5em; 19 padding: 4%; 20 z-index: 3; 21 display: flex; 22 flex-direction: column; 23 border-radius: 0.5rem; 24 border: 4px solid #fff; 25 background: rgba(0, 255, 240, 0.52); 26 box-shadow: 0px 0px 64px 0px #82e1ff inset, 0px 0px 16px #a8fffaa6; 27 backdrop-filter: blur(3.5px); 28 gap: 1em; 29 animation: float 2s ease-in-out infinite; 30} 31 32#login-lable { 33 text-align: center; 34 color: white; 35 font-size: 2rem; 36 font-weight: 600; 37 letter-spacing: 8px; 38 text-shadow: 0px 0px 16px rgb(243, 243, 243); 39} 40 41.form-content { 42 height: 3em; 43 padding: 1px 8px; 44 color: white; 45 text-decoration: none; 46 letter-spacing: 1px; 47 font-weight: bold; 48 border-radius: 6px; 49 border: 2px solid #fff; 50 background: rgba(139, 255, 247, 0.486); 51 box-shadow: 0px 0px 1px 3px #9ee5e3 inset, 0px 4px 4px 0px #181a6040; 52 text-shadow: 0px 1px 4px rgb(243, 243, 243); 53} 54 55.form-content:focus-visible { 56 outline: none; 57 text-decoration: none; 58 background: rgba(139, 189, 255, 0.59); 59 box-shadow: 0px 0px 1px 4px #9ee5e3; 60} 61 62.form-content:hover { 63 background: rgba(139, 189, 255, 0.59); 64} 65 66::placeholder { 67 font-weight: 300; 68 color: white; 69 letter-spacing: 0.1rem; 70 text-shadow: 0px 1px 5px rgb(66, 66, 66); 71} 72 73.form button { 74 cursor: pointer; 75 height: 3.5rem; 76 padding: 0%; 77 color: white; 78 font-size: 1.5em; 79 letter-spacing: 0.3rem; 80 border: 2px solid white; 81 background: linear-gradient(144deg, #9c11ffce, #2000eeb6 50%, #15efffbb); 82} 83 84.form button:hover { 85 position: relative; 86 bottom: 4px; 87 background: linear-gradient(144deg, #9c11ff, #2000ee 50%, #15fff3); 88 box-shadow: 0px 0px 2px 2px #ffffff; 89} 90 91@keyframes float { 92 0% { 93 position: relative; 94 } 95 96 50% { 97 top: 50px; 98 } 99 100 100% { 101 position: relative; 102 } 103} 104 105@keyframes rays { 106 0% { 107 opacity: 0.6; 108 } 109 110 50% { 111 opacity: 1; 112 } 113 114 100% { 115 opacity: 0.6; 116 } 117} 118
2K views
2K views
MIT License