Form by HoseinParvaresh
#212121
1::selection { 2 background-color: gray; 3} 4 5.container { 6 margin: 0 auto; 7 display: flex; 8 justify-content: center; 9 align-items: center; 10} 11 12.form { 13 width: 400px; 14 height: 400px; 15 background-image: linear-gradient(to bottom, #424242,#212121); 16 display: flex; 17 align-items: center; 18 flex-direction: column; 19 border-radius: 0.5rem; 20} 21 22.title { 23 color: wheat; 24 margin: 3rem 0; 25 font-size: 2rem; 26} 27 28.input { 29 margin: 0.5rem 0; 30 padding: 1rem 0.5rem; 31 width: 20rem; 32 background-color: inherit; 33 color: wheat; 34 border: none; 35 outline: none; 36} 37 38.username { 39 border-bottom: 1px solid wheat; 40 transition: all 400ms; 41} 42 43.username:hover { 44 background-color: #424242; 45 border: none; 46 border-radius: 0.5rem; 47} 48 49.password { 50 border-bottom: 1px solid wheat; 51 transition: all 400ms; 52} 53 54.password:hover { 55 background-color: #424242; 56 border: none; 57 border-radius: 0.5rem; 58} 59 60.btn { 61 height: 3rem; 62 width: 20rem; 63 margin-top: 3rem; 64 background-color: wheat; 65 border-radius: 0.5rem; 66 border: none; 67 font-size: 1.2rem; 68 transition: all 400ms; 69 box-shadow: 0 0 10px antiquewhite, 0 0 10px antiquewhite; 70} 71 72.btn:hover { 73 background-color: antiquewhite; 74 box-shadow: none; 75} 76
1.7K views
1.7K views
MIT License