Form by KhelVers
#e8e8e8
1.form { 2 height: 18em; 3 width: 16em; 4 padding: 4%; 5 border-radius: 16px; 6 background: #e8e8e8; 7 box-shadow: 12px 12px 18px #bababa, 8 -12px -12px 18px #ffffff; 9 display: flex; 10 flex-direction: column; 11 align-items: stretch; 12 justify-content: space-evenly; 13} 14 15#login-lable { 16 height: 15%; 17 text-align: center; 18 font-size: 34px; 19 letter-spacing: 3px; 20 font-weight: 600; 21 text-shadow: -2px -2px 3px #ffffff , 22 2px 2px 3px #bababa; 23 position: relative; 24 top: -14px; 25} 26 27.input { 28 height: 16%; 29 padding: 1px 8px; 30 border: none; 31 font-size: 1em; 32 letter-spacing: 2px; 33 border-radius: 8px; 34 background: #f3f3f3; 35 box-shadow: inset -2px -2px 4px #ffffff, 36 inset 2px 2px 4px rgba(0, 0, 0, 0.356); 37 text-decoration: none; 38 background: linear-gradient(to right,white, #80808010, white); 39 background-size: 200% 200%; 40 animation: input 4s infinite; 41} 42 43.input:focus-visible { 44 outline: none; 45 background: rgb(241, 241, 241); 46} 47 48#btn { 49 font-size: x-large; 50 letter-spacing: 3px; 51 color: white; 52 font-weight: 700; 53 height: 18%; 54 background: linear-gradient(144deg,#af40ff, 55 #5b42f3 50%,#00ddeb); 56 border-radius: 8px; 57 border: none; 58 box-shadow: inset 1px 3px 3px #ffffffbd, 59 inset -4px -4px 3px #00000046; 60 background-size: 150% 150%; 61 animation: input 5s infinite; 62 transition: all 900ms ease-in; 63} 64 65#btn:hover { 66 position: relative; 67 bottom: 3px; 68 background: linear-gradient(144deg,#9706ff, 69 #2f0fff 50%,#18f0ff); 70} 71 72@keyframes input { 73 0% { 74 background-position: 0% 50%; 75 } 76 77 50% { 78 background-position: 100% 50%; 79 } 80 81 100% { 82 background-position: 0% 50%; 83 } 84} 85
867 views
867 views
MIT License