Form by bociKond
#212121
1form { 2 --bg-light: #efefef; 3 --bg-dark: #707070; 4 --clr: #58BC82; 5 --clr-alpha: #9c9c9c60; 6 display: flex; 7 flex-direction: column; 8 align-items: center; 9 gap: 1rem; 10 width: 100%; 11} 12 13.form .input-span { 14 width: 100%; 15 display: flex; 16 flex-direction: column; 17 gap: .5rem; 18} 19 20form input[type="email"], 21form input[type="password"] { 22 border-radius: 0.5rem; 23 padding: 1rem 0.75rem; 24 width: 100%; 25 border: none; 26 display: flex; 27 align-items: center; 28 gap: 0.5rem; 29 background-color: var(--clr-alpha); 30 outline: 2px solid var(--bg-dark); 31} 32 33form input[type="email"]:focus, 34form input[type="password"]:focus { 35 outline: 2px solid var(--clr); 36} 37 38.label { 39 align-self: flex-start; 40 color: var(--clr); 41 font-weight: 600; 42} 43 44form .submit { 45 padding: 1rem 0.75rem; 46 width: 100%; 47 display: flex; 48 align-items: center; 49 gap: 0.5rem; 50 border-radius: 3rem; 51 background-color: var(--bg-dark); 52 color: var(--bg-light); 53 border: none; 54 cursor: pointer; 55 transition: all 300ms; 56 font-weight: 600; 57 font-size: .9rem; 58} 59 60form .submit:hover { 61 background-color: var(--clr); 62 color: var(--bg-dark); 63} 64 65.span { 66 text-decoration: none; 67 color: var(--bg-dark); 68} 69 70.span a { 71 color: var(--clr); 72}
7.4K views
7.4K views
MIT License