Form by KapeParaguay

1.form {
2  display: flex;
3  flex-direction: column;
4  gap: 10px;
5  background: linear-gradient(45deg, skyblue, darkblue);
6  padding: 30px;
7  width: 450px;
8  border-radius: 20px;
9  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
10    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
11  transition: background 0.3s ease;
12}
13
14.form:hover {
15  background: linear-gradient(45deg, darkblue, skyblue);
16}
17
18::placeholder {
19  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
20    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
21}
22
23.form button {
24  align-self: flex-end;
25}
26
27.flex-column > label {
28  color: white;
29  font-weight: 600;
30}
31
32.inputForm {
33  border: 1.5px solid #ecedec;
34  border-radius: 10em;
35  height: 50px;
36  display: flex;
37  align-items: center;
38  padding-left: 10px;
39  transition: 0.2s ease-in-out;
40  background-color: white;
41}
42
43.input {
44  margin-left: 10px;
45  border-radius: 10rem;
46  border: none;
47  width: 100%;
48  height: 100%;
49}
50
51.input:focus {
52  outline: none;
53}
54
55.inputForm:focus-within {
56  border: 1.5px solid orange;
57}
58
59.flex-row {
60  display: flex;
61  flex-direction: row;
62  align-items: center;
63  gap: 10px;
64  justify-content: space-between;
65}
66
67.flex-row > div > label {
68  font-size: 14px;
69  color: black;
70  font-weight: 400;
71}
72
73.span {
74  font-size: 14px;
75  margin-left: 5px;
76  color: white;
77  font-weight: 500;
78  cursor: pointer;
79}
80
81.button-submit {
82  position: relative;
83  display: inline-block;
84  padding: 15px 30px;
85  text-align: center;
86  letter-spacing: 1px;
87  text-decoration: none;
88  background: transparent;
89  transition: ease-out 0.5s;
90  border: 2px solid;
91  border-radius: 10em;
92  box-shadow: inset 0 0 0 0 blue;
93  margin: 20px 0 10px 0;
94  color: white;
95  font-size: 15px;
96  font-weight: 500;
97  height: 50px;
98  width: 100%;
99  cursor: pointer;
100}
101
102.button-submit:hover {
103  color: white;
104  box-shadow: inset 0 -100px 0 0 royalblue;
105}
106
107.button-submit:active {
108  transform: scale(0.9);
109}
110
111.p {
112  text-align: center;
113  color: white;
114  font-size: 14px;
115  margin: 5px 0;
116}
117
118.btn {
119  margin-top: 10px;
120  width: 100%;
121  height: 50px;
122  border-radius: 10em;
123  display: flex;
124  justify-content: center;
125  align-items: center;
126  font-weight: 500;
127  gap: 10px;
128  border: 1px solid #ededef;
129  background-color: white;
130  cursor: pointer;
131  transition: 0.2s ease-in-out;
132}
133
134.btn:hover {
135  border: 1px solid orange;
136}
137