Form by codebykay101
#212121
1.container { 2 width: 350px; 3 height: 400px; 4 display: flex; 5 align-items: center; 6 justify-content: center; 7 position: relative; 8 border-radius: 3px; 9 border: 1px solid #396afc; 10 background: linear-gradient(to right, #005c97, #363795); 11 box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 12} 13 14.container form .descr { 15 font-size: 20px; 16 font-weight: 500; 17 color: #e8e8e8; 18 margin-bottom: 25px; 19 margin-top: 25px; 20 text-align: center; 21} 22 23.form { 24 display: flex; 25 flex-direction: column; 26} 27 28.input, textarea { 29 margin: 1em 0 1em 0; 30 width: 300px; 31 position: relative; 32} 33 34.input input, textarea { 35 font-size: 100%; 36 padding: 0.7em; 37 outline: none; 38 color: #e8e8e8; 39 border: none; 40 border-bottom: 2px solid #e8e8e8; 41 background: transparent; 42 border-radius: none; 43 width: 100%; 44 resize: none; 45} 46 47.input label { 48 font-size: 100%; 49 position: absolute; 50 left: 0; 51 color: #e8e8e8; 52 padding: 0.7em; 53 margin-left: 0.1em; 54 pointer-events: none; 55 transition: all 0.5s ease; 56 text-transform: uppercase; 57} 58 59.input :is(input:focus, input:valid)~label { 60 transform: translateY(-50%) scale(.9); 61 margin: 0em; 62 padding: 0.4em; 63 background: transparent; 64} 65 66.input textarea:focus ~ label, 67.input textarea:valid ~ label { 68 transform: translateY(-50%) scale(.9); 69 margin: 0em; 70 padding: 0.4em; 71 background: transparent; 72} 73 74.inputGroup :is(input:focus, input:valid) { 75 border-color: rgb(37, 37, 211); 76} 77 78.form button { 79 color: #e8e8e8; 80 font-size: 15px; 81 align-self: flex-start; 82 padding: 0.6em; 83 border: none; 84 cursor: pointer; 85 margin-bottom: 50px; 86 background: transparent; 87 transition: all 0.3s ease-in-out; 88 position: relative; 89 overflow: hidden; 90} 91 92.form button:before { 93 content: ""; 94 position: absolute; 95 bottom: 100%; 96 left: 0; 97 width: 100%; 98 height: 100%; 99 background-color: #e8e8e8; 100 opacity: 0; 101 transition: opacity 0.3s ease-in-out; 102} 103 104.form button:hover:before { 105 opacity: 0.2; 106} 107 108.form button:hover { 109 transform: translateY(-3px); 110 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 111} 112 113
2.7K views
2.7K views
MIT License