#212121
1.form-container { 2 width: 400px; 3 background: linear-gradient(#212121, #212121) padding-box, 4 linear-gradient(145deg, transparent 35%,#e81cff, #40c9ff) border-box; 5 border: 2px solid transparent; 6 padding: 32px 24px; 7 font-size: 14px; 8 font-family: inherit; 9 color: white; 10 display: flex; 11 flex-direction: column; 12 gap: 20px; 13 box-sizing: border-box; 14 border-radius: 16px; 15} 16 17.form-container button:active { 18 scale: 0.95; 19} 20 21.form-container .form { 22 display: flex; 23 flex-direction: column; 24 gap: 20px; 25} 26 27.form-container .form-group { 28 display: flex; 29 flex-direction: column; 30 gap: 2px; 31} 32 33.form-container .form-group label { 34 display: block; 35 margin-bottom: 5px; 36 color: #717171; 37 font-weight: 600; 38 font-size: 12px; 39} 40 41.form-container .form-group input { 42 width: 100%; 43 padding: 12px 16px; 44 border-radius: 8px; 45 color: #fff; 46 font-family: inherit; 47 background-color: transparent; 48 border: 1px solid #414141; 49} 50 51.form-container .form-group textarea { 52 width: 100%; 53 padding: 12px 16px; 54 border-radius: 8px; 55 resize: none; 56 color: #fff; 57 height: 96px; 58 border: 1px solid #414141; 59 background-color: transparent; 60 font-family: inherit; 61} 62 63.form-container .form-group input::placeholder { 64 opacity: 0.5; 65} 66 67.form-container .form-group input:focus { 68 outline: none; 69 border-color: #e81cff; 70} 71 72.form-container .form-group textarea:focus { 73 outline: none; 74 border-color: #e81cff; 75} 76 77.form-container .form-submit-btn { 78 display: flex; 79 align-items: flex-start; 80 justify-content: center; 81 align-self: flex-start; 82 font-family: inherit; 83 color: #717171; 84 font-weight: 600; 85 width: 40%; 86 background: #313131; 87 border: 1px solid #414141; 88 padding: 12px 16px; 89 font-size: inherit; 90 gap: 8px; 91 margin-top: 8px; 92 cursor: pointer; 93 border-radius: 6px; 94} 95 96.form-container .form-submit-btn:hover { 97 background-color: #fff; 98 border-color: #fff; 99} 100 101 102 103
8.4K views
8.4K views
Comments
1omriluz 26. September at 14:34
26. September at 14:34
Great Job, wonder how this will look with a slight gradient animation, might try to recreate it
Variations
1 MIT License