Form by somshri16
#e8e8e8
1.form { 2 display: flex; 3 flex-direction: column; 4 gap: 10px; 5 max-width: 350px; 6 background-color: #fff; 7 padding: 20px; 8 border-radius: 10px; 9 position: relative; 10} 11 12.message { 13 color: rgba(88, 87, 87, 0.822); 14 font-size: 14px; 15} 16 17.flex { 18 display: flex; 19 width: 100%; 20 gap: 6px; 21} 22 23.form label { 24 position: relative; 25} 26 27.form label .input { 28 width: 100%; 29 padding: 10px 10px 20px 10px; 30 outline: 0; 31 border: 1px solid rgba(105, 105, 105, 0.397); 32 border-radius: 5px; 33} 34 35.form label .input + span { 36 position: absolute; 37 left: 10px; 38 top: 15px; 39 color: grey; 40 font-size: 0.9em; 41 cursor: text; 42 transition: 0.3s ease; 43} 44 45.form label .input:placeholder-shown + span { 46 top: 15px; 47 font-size: 0.9em; 48} 49 50.form label .input:focus + span,.form label .input:valid + span { 51 top: 30px; 52 font-size: 0.7em; 53 font-weight: 600; 54} 55 56.form label .input:valid + span { 57 color: green; 58} 59 60.input01 { 61 width: 100%; 62 padding: 10px 10px 20px 10px; 63 outline: 0; 64 border: 1px solid rgba(105, 105, 105, 0.397); 65 border-radius: 5px; 66} 67 68.form label .input01 + span { 69 position: absolute; 70 left: 10px; 71 top: 50px; 72 color: grey; 73 font-size: 0.9em; 74 cursor: text; 75 transition: 0.3s ease; 76} 77 78.form label .input01:placeholder-shown + span { 79 top: 40px; 80 font-size: 0.9em; 81} 82 83.form label .input01:focus + span,.form label .input01:valid + span { 84 top: 50px; 85 font-size: 0.7em; 86 font-weight: 600; 87} 88 89.form label .input01:valid + span { 90 color: green; 91} 92 93.fancy { 94 background-color: transparent; 95 border: 2px solid #cacaca; 96 border-radius: 0px; 97 box-sizing: border-box; 98 color: #fff; 99 cursor: pointer; 100 display: inline-block; 101 font-weight: 390; 102 letter-spacing: 2px; 103 margin: 0; 104 outline: none; 105 overflow: visible; 106 padding: 8px 30px; 107 position: relative; 108 text-align: center; 109 text-decoration: none; 110 text-transform: none; 111 transition: all 0.3s ease-in-out; 112 user-select: none; 113 font-size: 13px; 114} 115 116.fancy::before { 117 content: " "; 118 width: 1.7rem; 119 height: 2px; 120 background: #cacaca; 121 top: 50%; 122 left: 1.5em; 123 position: absolute; 124 transform: translateY(-50%); 125 transform: translateX(230%); 126 transform-origin: center; 127 transition: background 0.3s linear, width 0.3s linear; 128} 129 130.fancy .text { 131 font-size: 1.125em; 132 line-height: 1.33333em; 133 padding-left: 2em; 134 display: block; 135 text-align: left; 136 transition: all 0.3s ease-in-out; 137 text-transform: lowercase; 138 text-decoration: none; 139 color: #818181; 140 transform: translateX(30%); 141} 142 143.fancy .top-key { 144 height: 2px; 145 width: 1.5625rem; 146 top: -2px; 147 left: 0.625rem; 148 position: absolute; 149 background: white; 150 transition: width 0.5s ease-out, left 0.3s ease-out; 151} 152 153.fancy .bottom-key-1 { 154 height: 2px; 155 width: 1.5625rem; 156 right: 1.875rem; 157 bottom: -2px; 158 position: absolute; 159 background: white; 160 transition: width 0.5s ease-out, right 0.3s ease-out; 161} 162 163.fancy .bottom-key-2 { 164 height: 2px; 165 width: 0.625rem; 166 right: 0.625rem; 167 bottom: -2px; 168 position: absolute; 169 background: white; 170 transition: width 0.5s ease-out, right 0.3s ease-out; 171} 172 173.fancy:hover { 174 color: white; 175 background: #cacaca; 176} 177 178.fancy:hover::before { 179 width: 1.5rem; 180 background: white; 181} 182 183.fancy:hover .text { 184 color: white; 185 padding-left: 1.5em; 186} 187 188.fancy:hover .top-key { 189 left: -2px; 190 width: 0px; 191} 192 193.fancy:hover .bottom-key-1, 194 .fancy:hover .bottom-key-2 { 195 right: 0; 196 width: 0; 197}
4.6K views
4.6K views
Variations
1 MIT License