Form by Shoh2008

Made by

@Shoh2008

Theme:

Dark

#form#sign-up

#212121

832 views

CSSAdd prefixes

1.form {
2  display: flex;
3  flex-direction: column;
4  gap: 10px;
5  background: #1e1e1e;
6  padding: 20px;
7  border: 1px solid #3d3c3c;
8  border-radius: 10px;
9  color: white;
10  text-align: center;
11  font-size: 20px;
12}
13
14.form input {
15  height: 35px;
16  outline: none;
17  border: 2px solid orange;
18  background: transparent;
19  padding: 20px 10px;
20  border-radius: 5px;
21  transition: .5s;
22  color: white;
23  font-size: 20px;
24}
25
26.form input:focus {
27  background: orange;
28}
29
30.form button {
31  width: 100%;
32  color: white;
33  transition: .5s;
34  font-size: 20px;
35  outline: none;
36  border: none;
37  height: 45px;
38  border-radius: 5px;
39  background: orange;
40  align-self: flex-end;
41}
42

.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #1e1e1e;
  padding: 20px;
  border: 1px solid #3d3c3c;
  border-radius: 10px;
  color: white;
  text-align: center;
  font-size: 20px;
}

.form input {
  height: 35px;
  outline: none;
  border: 2px solid orange;
  background: transparent;
  padding: 20px 10px;
  border-radius: 5px;
  transition: .5s;
  color: white;
  font-size: 20px;
}

.form input:focus {
  background: orange;
}

.form button {
  width: 100%;
  color: white;
  transition: .5s;
  font-size: 20px;
  outline: none;
  border: none;
  height: 45px;
  border-radius: 5px;
  background: orange;
  align-self: flex-end;
}

HTML

1<form class="form">
2Sign Up
3    <input type="text" class="input" placeholder="Name">
4    <input type="text" class="input" placeholder="Password"> 
5    <button>Submit</button>
6</form>

<form class="form">
Sign Up
    <input type="text" class="input" placeholder="Name">
    <input type="text" class="input" placeholder="Password"> 
    <button>Submit</button>
</form>