Input by Smit-Prajapati
#e8e8e8
1.input-container { 2 display: flex; 3 background: white; 4 border-radius: 1rem; 5 background: linear-gradient(45deg, #c5c5c5 0%, #ffffff 100%); 6 box-shadow: 20px 20px 20px #d8d8d8,-10px -10px 20px #f8f8f8; 7 padding: 0.3rem; 8 gap: 0.3rem; 9} 10 11.input-container input { 12 border-radius: 0.8rem 0 0 0.8rem; 13 background: #e8e8e8; 14 box-shadow: inset 13px 13px 10px #dcdcdc, 15 inset -13px -13px 10px #f4f4f4; 16 width: 100%; 17 flex-basis: 75%; 18 padding: 1rem; 19 border: none; 20 border-left: 2px solid #4998FF; 21 color: #5e5e5e; 22 transition: all 0.2s ease-in-out; 23} 24 25.input-container input:focus { 26 border-left: 2px solid #4998FF; 27 outline: none; 28 box-shadow: inset 13px 13px 10px #BFF0FA,inset -13px -13px 10px #f4f4f4; 29} 30 31.input-container button { 32 flex-basis: 25%; 33 padding: 1rem; 34 background: linear-gradient(135deg, #BFF0FA 0%, #4998FF 100%); 35 font-weight: 900; 36 letter-spacing: 0.3rem; 37 text-transform: uppercase; 38 color: white; 39 border: none; 40 width: 100%; 41 border-radius: 0 1rem 1rem 0; 42 transition: all 0.2s ease-in-out; 43} 44 45.input-container button:hover { 46 background: linear-gradient(135deg, #BFF0FA 0%, #4998ffc4 100%); 47} 48 49@media (max-width: 500px) { 50 .input-container { 51 flex-direction: column; 52 } 53 54 .input-container input { 55 border-radius: 0.8rem; 56 } 57 58 .input-container button { 59 padding: 1rem; 60 border-radius: 0.8rem; 61 } 62}
1.1K views
Variation of ainput
MIT License