forked from uiverse-io/galaxy
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathPraashoo7_short-horse-99.html
76 lines (68 loc) · 1.56 KB
/
Praashoo7_short-horse-99.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<form class="form">
<p class="heading">Login</p>
<input class="input" placeholder="Username" type="text">
<input class="input" placeholder="Password" type="text">
<button class="btn">Submit</button>
</form>
<style>
/* From Uiverse.io by Praashoo7 - Tags: neumorphism, login, form */
.form {
display: flex;
flex-direction: column;
gap: 10px;
background-color: white;
padding: 2.5em;
border-radius: 25px;
transition: .4s ease-in-out;
box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 2px;
}
.form:hover {
transform: translateX(-0.5em) translateY(-0.5em);
border: 1px solid #171717;
box-shadow: 10px 10px 0px #666666;
}
.heading {
color: black;
padding-bottom: 2em;
text-align: center;
font-weight: bold;
}
.input {
border-radius: 5px;
border: 1px solid whitesmoke;
background-color: whitesmoke;
outline: none;
padding: 0.7em;
transition: .4s ease-in-out;
}
.input:hover {
box-shadow: 6px 6px 0px #969696,
-3px -3px 10px #ffffff;
}
.input:focus {
background: #ffffff;
box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
}
.form .btn {
margin-top: 2em;
align-self: center;
padding: 0.7em;
padding-left: 1em;
padding-right: 1em;
border-radius: 10px;
border: none;
color: black;
transition: .4s ease-in-out;
box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px;
}
.form .btn:hover {
box-shadow: 6px 6px 0px #969696,
-3px -3px 10px #ffffff;
transform: translateX(-0.5em) translateY(-0.5em);
}
.form .btn:active {
transition: .2s;
transform: translateX(0em) translateY(0em);
box-shadow: none;
}
</style>