Form by reshades
#212121
1.form { 2 display: flex; 3 flex-direction: column; 4 gap: 10px; 5 background: #00000000; 6 border-radius: 16px; 7 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 8 backdrop-filter: blur(8.2px); 9 -webkit-backdrop-filter: blur(8.2px); 10 border: 1px solid #369eff66; 11 width: 14em; 12 height: 14em; 13} 14 15.content { 16 display: flex; 17 flex-direction: column; 18 gap: 10px; 19 margin-top: auto; 20 margin-bottom: auto; 21} 22 23.form p { 24 color: #fff; 25 font-weight: bolder; 26} 27 28.path { 29 fill: #369eff 30} 31 32.svg { 33 filter: blur(20px); 34 z-index: -1; 35 position: absolute; 36 opacity: 50%; 37 animation: anim 3s infinite; 38} 39 40.inp { 41 margin-left: auto; 42 margin-right: auto; 43 white-space: 4px; 44} 45 46.input + .input { 47 margin-left: 0.3em 48} 49 50.input { 51 color: #fff; 52 height: 2em; 53 width: 2em; 54 float: left; 55 text-align: center; 56 background: #00000000; 57 outline: none; 58 border: 1px #369eff solid; 59 border-radius: 10px; 60 transition: all 0.6s ease; 61} 62 63.input:focus { 64 outline: none; 65 border: 1px #fff solid; 66} 67 68.input:not(:placeholder-shown) { 69 opacity: 40% 70} 71 72.form button { 73 margin-left: auto; 74 margin-right: auto; 75 background-color: #00000000; 76 color: #fff; 77 width: 8.5em; 78 height: 2.3em; 79 border: #369eff 0.2em solid; 80 border-radius: 11px; 81 transition: all 0.5s ease; 82} 83 84.form button:hover { 85 background-color: #369eff; 86} 87 88@keyframes anim { 89 0% { 90 transform: translateY(-70px); 91 } 92 93 50% { 94 transform: translateY(-19px); 95 } 96 97 100% { 98 transform: translateY(-70px); 99 } 100}
1.3K views
1.3K views
MIT License