Form by Sr-Ajo

1.form {
2  display: flex;
3  flex-direction: column;
4  gap: 10px;
5  max-width: 350px;
6  background-color: #355891;
7  padding: 20px;
8  border-radius: 10px;
9  position: relative;
10}
11
12.message {
13  color: #355891;
14  font-size: 14px;
15}
16
17.flex {
18  display: flex;
19  width: 100%;
20  gap: 6px;
21}
22
23.form label {
24  position: relative;
25}
26
27.form label .input {
28  width: 100%;
29  padding: 10px 10px 20px 10px;
30  outline: 0;
31  border: 1px solid #355891;
32  border-radius: 5px;
33}
34
35.form label .input + span {
36  position: absolute;
37  left: 10px;
38  top: 15px;
39  color: #355891;
40  font-size: 0.9em;
41  cursor: text;
42  transition: 0.3s ease;
43}
44
45.form label .input:placeholder-shown + span {
46  top: 15px;
47  font-size: 0.9em;
48}
49
50.form label .input:focus + span,.form label .input:valid + span {
51  top: 30px;
52  font-size: 0.7em;
53  font-weight: 600;
54}
55
56.form label .input:valid + span {
57  color: green;
58}
59
60.input01 {
61  width: 100%;
62  padding: 10px 10px 20px 10px;
63  outline: 0;
64  border: 1px solid #355891;
65  border-radius: 5px;
66}
67
68.form label .input01 + span {
69  position: absolute;
70  left: 10px;
71  top: 50px;
72  color: #355891;
73  font-size: 0.9em;
74  cursor: text;
75  transition: 0.3s ease;
76}
77
78.form label .input01:placeholder-shown + span {
79  top: 40px;
80  font-size: 0.9em;
81}
82
83.form label .input01:focus + span,.form label .input01:valid + span {
84  top: 50px;
85  font-size: 0.7em;
86  font-weight: 600;
87}
88
89.form label .input01:valid + span {
90  color: green;
91}
92
93.fancy {
94  background-color: white;
95  border: 2px solid #355891;
96  border-radius: 0px;
97  box-sizing: border-box;
98  color: #355891;
99  cursor: pointer;
100  display: inline-block;
101  font-weight: 390;
102  letter-spacing: 2px;
103  margin: 0;
104  outline: none;
105  overflow: visible;
106  padding: 8px 30px;
107  position: relative;
108  text-align: center;
109  text-decoration: none;
110  text-transform: none;
111  transition: all 0.3s ease-in-out;
112  user-select: none;
113  font-size: 13px;
114}
115
116.fancy::before {
117  content: " ";
118  width: 1.7rem;
119  height: 2px;
120  background: #355891;
121  top: 50%;
122  left: 1.5em;
123  position: absolute;
124  transform: translateY(-50%);
125  transform: translateX(230%);
126  transform-origin: center;
127  transition: background 0.3s linear, width 0.3s linear;
128}
129
130.fancy .text {
131  font-size: 1.125em;
132  line-height: 1.33333em;
133  padding-left: 2em;
134  display: block;
135  text-align: left;
136  transition: all 0.3s ease-in-out;
137  text-transform: lowercase;
138  text-decoration: none;
139  color: #355891;
140  transform: translateX(30%);
141}
142
143.fancy .top-key {
144  height: 2px;
145  width: 1.5625rem;
146  top: -2px;
147  left: 0.625rem;
148  position: absolute;
149  background: #355891;
150  transition: width 0.5s ease-out, left 0.3s ease-out;
151}
152
153.fancy .bottom-key-1 {
154  height: 2px;
155  width: 1.5625rem;
156  right: 1.875rem;
157  bottom: -2px;
158  position: absolute;
159  background: #355891;
160  transition: width 0.5s ease-out, right 0.3s ease-out;
161}
162
163.fancy .bottom-key-2 {
164  height: 2px;
165  width: 0.625rem;
166  right: 0.625rem;
167  bottom: -2px;
168  position: absolute;
169  background: #355891;
170  transition: width 0.5s ease-out, right 0.3s ease-out;
171}
172
173.fancy:hover {
174  color: #355891;
175  background: #5f82a9;
176}
177
178.fancy:hover::before {
179  width: 1.5rem;
180  background: #355891;
181}
182
183.fancy:hover .text {
184  color: white;
185  padding-left: 1.5em;
186}
187
188.fancy:hover .top-key {
189  left: -2px;
190  width: 0px;
191}
192
193.fancy:hover .bottom-key-1,
194 .fancy:hover .bottom-key-2 {
195  right: 0;
196  width: 0;
197}