Form by KapeParaguay
#212121
1.form { 2 display: flex; 3 flex-direction: column; 4 gap: 10px; 5 background: linear-gradient(45deg, red, yellow); 6 padding: 30px; 7 width: 450px; 8 border-radius: 20px; 9 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, 10 Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 11 transition: background 0.3s ease; 12} 13 14.form:hover { 15 background: linear-gradient(45deg, yellow, red); 16} 17 18::placeholder { 19 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, 20 Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 21} 22 23.form button { 24 align-self: flex-end; 25} 26 27.flex-column > label { 28 color: #151717; 29 font-weight: 600; 30} 31 32.inputForm { 33 border: 1.5px solid #ecedec; 34 border-radius: 10em; 35 height: 50px; 36 display: flex; 37 align-items: center; 38 padding-left: 10px; 39 transition: 0.2s ease-in-out; 40 background-color: white; 41} 42 43.input { 44 margin-left: 10px; 45 border-radius: 10rem; 46 border: none; 47 width: 100%; 48 height: 100%; 49} 50 51.input:focus { 52 outline: none; 53} 54 55.inputForm:focus-within { 56 border: 1.5px solid #2d79f3; 57} 58 59.flex-row { 60 display: flex; 61 flex-direction: row; 62 align-items: center; 63 gap: 10px; 64 justify-content: space-between; 65} 66 67.flex-row > div > label { 68 font-size: 14px; 69 color: black; 70 font-weight: 400; 71} 72 73.span { 74 font-size: 14px; 75 margin-left: 5px; 76 color: white; 77 font-weight: 500; 78 cursor: pointer; 79} 80 81.button-submit { 82 position: relative; 83 display: inline-block; 84 padding: 15px 30px; 85 text-align: center; 86 letter-spacing: 1px; 87 text-decoration: none; 88 background: transparent; 89 transition: ease-out 0.5s; 90 border: 2px solid; 91 border-radius: 10em; 92 box-shadow: inset 0 0 0 0 red; 93 margin: 20px 0 10px 0; 94 color: white; 95 font-size: 15px; 96 font-weight: 500; 97 height: 50px; 98 width: 100%; 99 cursor: pointer; 100} 101 102.button-submit:hover { 103 color: white; 104 box-shadow: inset 0 -100px 0 0 darkorange; 105} 106 107.button-submit:active { 108 transform: scale(0.9); 109} 110 111.p { 112 text-align: center; 113 color: black; 114 font-size: 14px; 115 margin: 5px 0; 116} 117 118.btn { 119 margin-top: 10px; 120 width: 100%; 121 height: 50px; 122 border-radius: 10em; 123 display: flex; 124 justify-content: center; 125 align-items: center; 126 font-weight: 500; 127 gap: 10px; 128 border: 1px solid #ededef; 129 background-color: white; 130 cursor: pointer; 131 transition: 0.2s ease-in-out; 132} 133 134.btn:hover { 135 border: 1px solid #2d79f3; 136} 137
605 views
Variation of aform
Variations
1 MIT License