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