#e8e8e8
1.form_main { 2 width: 280px; 3 display: flex; 4 flex-direction: column; 5 align-items: center; 6 justify-content: center; 7 background-color: rgb(255, 255, 255); 8 padding: 30px 30px 30px 30px; 9 border-radius: 30px; 10 box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.062); 11} 12 13.heading { 14 font-size: 2.5em; 15 color: #2e2e2e; 16 font-weight: 700; 17 margin: 15px 0 30px 0; 18} 19 20.inputContainer { 21 width: 100%; 22 position: relative; 23 display: flex; 24 align-items: center; 25 justify-content: center; 26} 27 28.inputIcon { 29 position: absolute; 30 left: 10px; 31} 32 33.inputField { 34 width: 100%; 35 height: 40px; 36 background-color: transparent; 37 border: none; 38 border-bottom: 2px solid rgb(173, 173, 173); 39 border-radius: 30px; 40 margin: 10px 0; 41 color: black; 42 font-size: .8em; 43 font-weight: 500; 44 box-sizing: border-box; 45 padding-left: 30px; 46} 47 48.inputField:focus { 49 outline: none; 50 border-bottom: 2px solid rgb(199, 114, 255); 51} 52 53.inputField::placeholder { 54 color: rgb(80, 80, 80); 55 font-size: 1em; 56 font-weight: 500; 57} 58 59#button { 60 position: relative; 61 width: 100%; 62 border: 2px solid #8000ff; 63 background-color: #8000ff; 64 height: 40px; 65 color: white; 66 font-size: .8em; 67 font-weight: 500; 68 letter-spacing: 1px; 69 border-radius: 30px; 70 margin: 10px; 71 cursor: pointer; 72 overflow: hidden; 73} 74 75#button::after { 76 content: ""; 77 position: absolute; 78 background-color: rgba(255, 255, 255, 0.253); 79 height: 100%; 80 width: 150px; 81 top: 0; 82 left: -200px; 83 border-bottom-right-radius: 100px; 84 border-top-left-radius: 100px; 85 filter: blur(10px); 86 transition-duration: .5s; 87} 88 89#button:hover::after { 90 transform: translateX(600px); 91 transition-duration: .5s; 92} 93 94.signupContainer { 95 margin: 0; 96 display: flex; 97 flex-direction: column; 98 align-items: center; 99 justify-content: center; 100 gap: 20px; 101} 102 103.signupContainer p { 104 font-size: .9em; 105 font-weight: 500; 106 color: black; 107} 108 109.signupContainer a { 110 font-size: .7em; 111 font-weight: 500; 112 background-color: #2e2e2e; 113 color: white; 114 text-decoration: none; 115 padding: 8px 15px; 116 border-radius: 20px; 117} 118 119
3.3K views
3.3K views
Comments
MIT License