2K views
1.container { 2 width: 300px; 3 position: relative; 4 border-radius: 5px; 5 overflow: hidden; 6 box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e; 7} 8 9.container .slider { 10 width: 200%; 11 position: relative; 12 transition: transform ease-out 0.3s; 13 display: flex; 14} 15 16#register_toggle { 17 display: none; 18} 19 20.container #register_toggle:checked + .slider { 21 transform: translateX(-50%); 22} 23 24.form { 25 display: flex; 26 flex-direction: column; 27 justify-content: center; 28 align-items: center; 29 gap: 30px; 30 padding: 1.5em 3em; 31 width: 50%; 32} 33 34.title { 35 text-align: center; 36 font-weight: 700; 37 font-size: 2em; 38} 39 40form .form_control { 41 width: 100%; 42 position: relative; 43 overflow: hidden; 44} 45 46form .form_control .label { 47 position: absolute; 48 top: 50%; 49 left: 10px; 50 transition: transform ease 0.2s; 51 transform: translate(0%, -50%); 52 font-size: 0.75em; 53 user-select: none; 54 pointer-events: none; 55 color: #b0b0b0; 56} 57 58form .form_control .input { 59 width: 100%; 60 background-color: transparent; 61 border: none; 62 outline: none; 63 color: #fff; 64 padding: 0.5rem; 65 font-size: 0.75rem; 66 border-radius: 5px; 67 transition: box-shadow ease 0.2s; 68 box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 1.5px 1.5px 3px #0e0e0e, inset -1.5px -1.5px 3px #5f5e5e; 69} 70 71form .form_control .input:focus, 72form .form_control .input:valid { 73 box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 3px 3px 4px #0e0e0e, inset -3px -3px 4px #5f5e5e; 74} 75 76form .form_control .input:focus + .label, 77form .form_control .input:valid + .label { 78 transform: translate(-150%, -50%); 79} 80 81form button { 82 width: 100%; 83 background-color: transparent; 84 border: none; 85 outline: none; 86 color: #fff; 87 padding: 0.5rem; 88 font-size: 0.75rem; 89 border-radius: 5px; 90 transition: box-shadow ease 0.1s; 91 box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e; 92} 93 94form button:active { 95 box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 3px 3px 4px #0e0e0e, inset -3px -3px 4px #5f5e5e; 96} 97 98.bottom_text { 99 font-size: 0.65em; 100} 101 102.bottom_text .swtich { 103 font-weight: 700; 104 cursor: pointer; 105}
MIT License