Form by VitorBaraoDias
#e8e8e8
1.form-control { 2 margin: 20px; 3 background-color: #ffffff; 4 box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6); 5 width: 400px; 6 display: flex; 7 justify-content: center; 8 flex-direction: column; 9 gap: 10px; 10 padding: 25px; 11 border-radius: 8px; 12} 13.title { 14 font-size: 28px; 15 font-weight: 800; 16} 17.input-field { 18 position: relative; 19 width: 100%; 20} 21 22.input { 23 margin-top: 15px; 24 width: 100%; 25 outline: none; 26 border-radius: 8px; 27 height: 45px; 28 border: 1.5px solid #ecedec; 29 background: transparent; 30 padding-left: 10px; 31} 32.input:focus { 33 border: 1.5px solid #2d79f3; 34} 35.input-field .label { 36 position: absolute; 37 top: 25px; 38 left: 15px; 39 color: #ccc; 40 transition: all 0.3s ease; 41 pointer-events: none; 42 z-index: 2; 43} 44.input-field .input:focus ~ .label, 45.input-field .input:valid ~ .label { 46 top: 5px; 47 left: 5px; 48 font-size: 12px; 49 color: #2d79f3; 50 background-color: #ffffff; 51 padding-left: 5px; 52 padding-right: 5px; 53} 54.submit-btn { 55 margin-top: 30px; 56 height: 55px; 57 background: #f2f2f2; 58 border-radius: 11px; 59 border: 0; 60 outline: none; 61 color: #ffffff; 62 font-size: 18px; 63 font-weight: 700; 64 background: linear-gradient(180deg, #363636 0%, #1b1b1b 50%, #000000 100%); 65 box-shadow: 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #000000; 66 transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); 67 cursor: pointer; 68} 69 70.submit-btn:hover { 71 box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #0000003a; 72} 73
1.2K views
1.2K views
MIT License