Form by 3bdel3ziz-T
#e8e8e8
1.form { 2 background: #0c0f14; 3 box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 4 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 5 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); 6 width: 320px; 7 display: flex; 8 flex-direction: column; 9 gap: 15px; 10 padding: 20px; 11 position: relative; 12 border-radius: 25px; 13} 14.form .label { 15 display: flex; 16 flex-direction: column; 17 gap: 5px; 18 height: -moz-fit-content; 19 height: fit-content; 20} 21.form .label:has(input:focus) .title { 22 top: 0; 23 left: 0; 24 color: #d17842; 25} 26.form .label .title { 27 padding: 0 10px; 28 transition: all 300ms; 29 font-size: 12px; 30 color: #8b8e98; 31 font-weight: 600; 32 width: -moz-fit-content; 33 width: fit-content; 34 top: 14px; 35 position: relative; 36 left: 15px; 37 background: #0c0f14; 38} 39.form .input-field { 40 width: auto; 41 height: 50px; 42 text-indent: 15px; 43 border-radius: 15px; 44 outline: none; 45 background-color: transparent; 46 border: 1px solid #21262e; 47 transition: all 0.3s; 48 caret-color: #d17842; 49 color: #aeaeae; 50} 51 52.form .input-field:hover { 53 border-color: rgba(209, 121, 66, 0.5); 54} 55 56.form .input-field:focus { 57 border-color: #d17842; 58} 59.form .split { 60 display: flex; 61 flex-direction: row; 62 justify-content: space-between; 63 width: 100%; 64 gap: 15px; 65} 66.form .split label { 67 width: 130px; 68} 69.form .checkout-btn { 70 margin-top: 20px; 71 padding: 20px 0; 72 border-radius: 25px; 73 font-weight: 700; 74 transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); 75 cursor: pointer; 76 font-size: 20px; 77 font-weight: 500; 78 display: flex; 79 align-items: center; 80 border: none; 81 justify-content: center; 82 fill: #fff; 83 color: #fff; 84 border: 2px solid transparent; 85 background: #d17842; 86 transition: all 200ms; 87} 88.form .checkout-btn:active { 89 scale: 0.95; 90} 91 92.form .checkout-btn:hover { 93 color: #d17842; 94 border: 2px solid #d17842; 95 background: transparent; 96} 97
443 views
443 views
MIT License