#212121
1.input-container { 2 display: flex; 3 background: white; 4 border-radius: 1rem; 5 background: linear-gradient(135deg, #23272F 0%, #14161a 100%); 6 box-shadow: 10px 10px 20px #0e1013, -10px -10px 40px #383e4b; 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: #23272F; 14 box-shadow: inset 5px 5px 10px #0e1013, inset -5px -5px 10px #383e4b, 0px 0px 100px rgba(255, 212, 59, 0), 0px 0px 100px rgba(255, 102, 0, 0); 15 width: 100%; 16 flex-basis: 75%; 17 padding: 1rem; 18 border: none; 19 border: 1px solid transparent; 20 color: white; 21 transition: all 0.2s ease-in-out; 22} 23 24.input-container input:focus { 25 border: 1px solid #FFD43B; 26 outline: none; 27 box-shadow: inset 0px 0px 10px rgba(255, 102, 0, 0.5), inset 0px 0px 10px rgba(255, 212, 59, 0.5), 0px 0px 100px rgba(255, 212, 59, 0.5), 0px 0px 100px rgba(255, 102, 0, 0.5); 28} 29 30.input-container button { 31 flex-basis: 25%; 32 padding: 1rem; 33 background: linear-gradient(135deg, rgb(255, 212, 59) 0%, rgb(255, 102, 0) 100%); 34 box-shadow: 0px 0px 1px rgba(255, 212, 59, 0.5), 0px 0px 1px rgba(255, 102, 0, 0.5); 35 font-weight: 900; 36 letter-spacing: 0.3rem; 37 text-transform: uppercase; 38 color: #23272F; 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, rgb(255, 212, 59) 50%, rgb(255, 102, 0) 100%); 47 box-shadow: 0px 0px 100px rgba(255, 212, 59, 0.5), 0px 0px 100px rgba(255, 102, 0, 0.5); 48} 49 50@media (max-width: 500px) { 51 .input-container { 52 flex-direction: column; 53 } 54 55 .input-container input { 56 border-radius: 0.8rem; 57 } 58 59 .input-container button { 60 padding: 1rem; 61 border-radius: 0.8rem; 62 } 63}
1.3K views
1.3K views
Comments
Variations
1 MIT License