Form by Rohankumar620

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}