169 views
CSSAdd prefixes
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} 49 50.input { 51 width: 245px; 52 min-height: 45px; 53 color: #fff; 54 outline: none; 55 transition: 0.35s; 56 padding: 0px 7px; 57 background-color: #212121; 58 border-radius: 6px; 59 border: 2px solid #212121; 60 box-shadow: 6px 6px 10px rgba(0,0,0,1), 61 1px 1px 10px rgba(255, 255, 255, 0.6); 62} 63 64.input::placeholder { 65 color: #999; 66} 67 68.input:focus.input::placeholder { 69 transition: 0.3s; 70 opacity: 0; 71} 72 73.input:focus { 74 transform: scale(1.05); 75 box-shadow: 6px 6px 10px rgba(0,0,0,1), 76 1px 1px 10px rgba(255, 255, 255, 0.6), 77 inset 2px 2px 10px rgba(0,0,0,1), 78 inset -1px -1px 5px rgba(255, 255, 255, 0.6); 79} 80 81.btn { 82 padding: 10px 35px; 83 cursor: pointer; 84 background-color: #212121; 85 border-radius: 6px; 86 border: 2px solid #212121; 87 box-shadow: 6px 6px 10px rgba(0,0,0,1), 88 1px 1px 10px rgba(255, 255, 255, 0.6); 89 color: #fff; 90 font-size: 15px; 91 font-weight: bold; 92 transition: 0.35s; 93} 94 95.btn:hover { 96 transform: scale(1.05); 97 box-shadow: 6px 6px 10px rgba(0,0,0,1), 98 1px 1px 10px rgba(255, 255, 255, 0.6), 99 inset 2px 2px 10px rgba(0,0,0,1), 100 inset -1px -1px 5px rgba(255, 255, 255, 0.6); 101} 102 103.btn:focus { 104 transform: scale(1.05); 105 box-shadow: 6px 6px 10px rgba(0,0,0,1), 106 1px 1px 10px rgba(255, 255, 255, 0.6), 107 inset 2px 2px 10px rgba(0,0,0,1), 108 inset -1px -1px 5px rgba(255, 255, 255, 0.6); 109} 110 111.form .switch { 112 font-size: 13px; 113} 114 115.form .switch .signup_tog { 116 font-weight: 700; 117 cursor: pointer; 118} 119 120.container #signup_toggle { 121 display: none; 122} 123 124.container #signup_toggle:checked + .form { 125 transform: rotateY(-180deg); 126}
HTML
1<div class="container"> 2 <input id="signup_toggle" type="checkbox"> 3 <form class="form"> 4 <div class="form_front"> 5 <div class="form_details">Login</div> 6 <input type="text" class="input" placeholder="Username"> 7 <input type="text" class="input" placeholder="Password"> 8 <button class="btn">Login</button> 9 <span class="switch">Don't have an account? 10 <label for="signup_toggle" class="signup_tog"> 11 Sign Up 12 </label> 13 </span> 14 </div> 15 <div class="form_back"> 16 <div class="form_details">SignUp</div> 17 <input type="text" class="input" placeholder="Firstname"> 18 <input type="text" class="input" placeholder="Username"> 19 <input type="text" class="input" placeholder="Password"> 20 <input type="text" class="input" placeholder="Confirm Password"> 21 <button class="btn">Signup</button> 22 <span class="switch">Already have an account? 23 <label for="signup_toggle" class="signup_tog"> 24 Sign In 25 </label> 26 </span> 27 </div> 28 </form> 29</div>