Form by John-CFO

1.form {
2  --glow-color: rgb(176, 255, 251);
3  --glow-spread-color: rgba(123, 246, 255, 0.781);
4  --enhanced-glow-color: rgb(182, 71, 71);
5  --btn-color: rgba(65, 65, 65, 0.508);
6  border: 2px solid var(--glow-color);
7  padding: 25px;
8  display: flex;
9  max-width: 420px;
10  flex-direction: column;
11  align-items: center;
12  overflow: hidden;
13  color: var(--glow-color);
14  background-color: var(--btn-color);
15  border-radius: 20px;
16  position: relative;
17}
18
19/*----heading and description-----*/
20
21.info {
22  margin-bottom: 10px;
23  display: flex;
24  flex-direction: column;
25  align-items: center;
26  text-align: center;
27}
28
29.title {
30  color: #fff;
31  font-size: 1.6rem;
32  font-weight: 900;
33}
34
35.description {
36  color: #fff;
37  margin-top: 10px;
38  font-size: 1rem;
39}
40
41/*----input-fields------*/
42
43.form .input-fields {
44  display: flex;
45  justify-content: space-between;
46  gap: 10px;
47}
48
49.form .input-fields input {
50  height: 2.5em;
51  width: 2.5em;
52  outline: none;
53  text-align: center;
54  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
55  font-size: 1.5rem;
56  color: #fff;
57  border-radius: 12px;
58  border: 2.5px solid rgba(253, 253, 253, 0.363);
59  background-color: rgb(255 255 255 / 0.05);
60}
61
62.form .input-fields input:focus {
63  border: 1px solid rgb(99, 236, 241);
64  box-shadow: inset -1px -1px 5px rgba(255, 255, 255, .6),
65        inset 10px 10px 10px rgba(0, 0, 0, .25);
66  transform: scale(1.05);
67  transition: 0.5s;
68}
69
70/*-----verify and clear buttons-----*/
71
72.action-btns {
73  display: flex;
74  margin-top: 12px;
75  gap: 0.5rem;
76}
77
78.verify {
79  padding: 10px 20px;
80  text-transform: uppercase;
81  text-decoration: none;
82  border-radius: 8px;
83  font-size: 1rem;
84  font-weight: 500;
85  color: #00f7ff;
86  text-shadow: none;
87  background: transparent;
88  box-shadow: transparent;
89  border: 1px solid #ffffff80;
90  transition: 0.5s ease;
91  user-select: none;
92}
93
94.verify:hover,:focus {
95  color: #ffffff;
96  background: #00eeff;
97  border: 1px solid #00e1ff;
98  text-shadow: 0 0 5px #ffffff,
99              0 0 10px #ffffff,
100              0 0 20px #ffffff;
101  box-shadow: 0 0 5px #00e1ff,
102              0 0 20px #00e1ff,
103              0 0 50px #00e1ff,
104              0 0 100px #00e1ff;
105}
106
107.clear {
108  padding: 10px 20px;
109  text-transform: uppercase;
110  text-decoration: none;
111  border-radius: 8px;
112  font-size: 1rem;
113  font-weight: 500;
114  color: #ff0000;
115  text-shadow: none;
116  background: transparent;
117  box-shadow: transparent;
118  border: 1px solid #ffffff80;
119  transition: 0.5s ease;
120  user-select: none;
121}
122
123.clear:hover,:focus {
124  color: #ffffff;
125  background: #ff0000;
126  border: 1px solid #ff0000;
127  text-shadow: 0 0 5px #ffffff,
128              0 0 10px #ffffff,
129              0 0 20px #ffffff;
130  box-shadow: 0 0 5px #ff0000,
131              0 0 20px #ff0000,
132              0 0 50px #ff0000,
133              0 0 100px #ff0000;
134}
135
136/*-----close button------*/
137
138.close {
139  position: absolute;
140  right: 10px;
141  top: 10px;
142  background-color: #494949;
143  color: #ff0000;
144  height: 30px;
145  width: 30px;
146  display: grid;
147  place-items: center;
148  border-radius: 50%;
149  cursor: pointer;
150  font-weight: 600;
151  transition: .5s ease;
152}
153
154.close:hover {
155  background-color: rgba(255, 0, 0, 0.644);
156  color: #fff;
157}