Form by AmIt-DasIT
#212121
1.container { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5} 6 7.form { 8 display: flex; 9 justify-content: center; 10 align-items: center; 11 transform-style: preserve-3d; 12 transition: all 1s ease; 13} 14 15.form .form_front { 16 display: flex; 17 flex-direction: column; 18 justify-content: center; 19 align-items: center; 20 gap: 20px; 21 position: absolute; 22 backface-visibility: hidden; 23 padding: 65px 45px; 24 border-radius: 15px; 25 box-shadow: inset 2px 2px 10px rgba(0,0,0,1), 26 inset -1px -1px 5px rgba(255, 255, 255, 0.6); 27} 28 29.form .form_back { 30 display: flex; 31 flex-direction: column; 32 justify-content: center; 33 align-items: center; 34 gap: 20px; 35 position: absolute; 36 backface-visibility: hidden; 37 transform: rotateY(-180deg); 38 padding: 65px 45px; 39 border-radius: 15px; 40 box-shadow: inset 2px 2px 10px rgba(0,0,0,1), 41 inset -1px -1px 5px rgba(255, 255, 255, 0.6); 42} 43 44.form_details { 45 font-size: 25px; 46 font-weight: 600; 47 padding-bottom: 10px; 48 color: white; 49} 50 51.input { 52 width: 245px; 53 min-height: 45px; 54 color: #fff; 55 outline: none; 56 transition: 0.35s; 57 padding: 0px 7px; 58 background-color: #212121; 59 border-radius: 6px; 60 border: 2px solid #212121; 61 box-shadow: 6px 6px 10px rgba(0,0,0,1), 62 1px 1px 10px rgba(255, 255, 255, 0.6); 63} 64 65.input::placeholder { 66 color: #999; 67} 68 69.input:focus.input::placeholder { 70 transition: 0.3s; 71 opacity: 0; 72} 73 74.input:focus { 75 transform: scale(1.05); 76 box-shadow: 6px 6px 10px rgba(0,0,0,1), 77 1px 1px 10px rgba(255, 255, 255, 0.6), 78 inset 2px 2px 10px rgba(0,0,0,1), 79 inset -1px -1px 5px rgba(255, 255, 255, 0.6); 80} 81 82.btn { 83 padding: 10px 35px; 84 cursor: pointer; 85 background-color: #212121; 86 border-radius: 6px; 87 border: 2px solid #212121; 88 box-shadow: 6px 6px 10px rgba(0,0,0,1), 89 1px 1px 10px rgba(255, 255, 255, 0.6); 90 color: #fff; 91 font-size: 15px; 92 font-weight: bold; 93 transition: 0.35s; 94} 95 96.btn:hover { 97 transform: scale(1.05); 98 box-shadow: 6px 6px 10px rgba(0,0,0,1), 99 1px 1px 10px rgba(255, 255, 255, 0.6), 100 inset 2px 2px 10px rgba(0,0,0,1), 101 inset -1px -1px 5px rgba(255, 255, 255, 0.6); 102} 103 104.btn:focus { 105 transform: scale(1.05); 106 box-shadow: 6px 6px 10px rgba(0,0,0,1), 107 1px 1px 10px rgba(255, 255, 255, 0.6), 108 inset 2px 2px 10px rgba(0,0,0,1), 109 inset -1px -1px 5px rgba(255, 255, 255, 0.6); 110} 111 112.form .switch { 113 font-size: 13px; 114 color: white; 115} 116 117.form .switch .signup_tog { 118 font-weight: 700; 119 cursor: pointer; 120 text-decoration: underline; 121} 122 123.container #signup_toggle { 124 display: none; 125} 126 127.container #signup_toggle:checked + .form { 128 transform: rotateY(-180deg); 129}
4.8K views
4.8K views
Variations
1 MIT License