Form by LogariusIV

1.form {
2  display: flex;
3  flex-direction: column;
4  width: 280px;
5  height: 350px;
6  background-color: #FFF;
7  margin: 0;
8  box-shadow: -1px 0px 25px 0px #21719369;
9  padding: 2.25em;
10  box-sizing: border-box;
11  border: solid 1px #DDD;
12  border-radius: 0.5em;
13  font-family: sans-serif;
14  font-size: 16px;
15  font-weight: 400;
16}
17
18.form .Group {
19  margin-bottom: 2em;
20}
21
22.form label {
23  margin: 0 0 10px;
24  display: block;
25  font-size: 1.25em;
26  color: #217093;
27  font-weight: 600;
28  font-family: inherit;
29}
30
31.form input {
32  padding: 0.3em 0.5em 0.4em;
33  background-color: #f3fafd;
34  border: solid 2px #217093;
35  border-radius: 4px;
36  box-sizing: border-box;
37  width: 100%;
38  height: 50px;
39  font-size: 1.3em;
40  color: #353538;
41  font-weight: 600;
42  font-family: inherit;
43  transition: box-shadow 0.2s linear, border-color 0.25s ease-out;
44}
45
46.form input:focus {
47  outline: none;
48  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
49  background-color: #edf8fc;
50  border: solid 2px #4eb8dd;
51}
52
53.form input::placeholder {
54  color: #21719383;
55}
56
57.form .btn {
58  margin: 0;
59  padding: 0.5em;
60  background-color: #4eb8dd;
61  border: none;
62  border-radius: 4px;
63  box-sizing: border-box;
64  box-shadow: none;
65  width: 100%;
66  height: 50px;
67  font-size: 1.4em;
68  color: #FFF;
69  font-weight: 600;
70  font-family: inherit;
71  transition: transforme 0.1s ease-in-out, background-color 0.2s ease-out;
72}
73
74.form .btn:hover {
75  cursor: pointer;
76  background-color: #217093;
77}
78
79.form .btn:active {
80  transform: scale(0.98);
81}