Input by EddyBel
#e8e8e8
1.input__container { 2 max-width: 200px; 3 display: flex; 4 flex-direction: column; 5 gap: 6px; 6 background: rgba(255, 255, 255, 0.3); 7 padding: 15px; 8 border-radius: 20px; 9 position: relative; 10} 11 12.input__container::before { 13 content: ""; 14 position: absolute; 15 width: 100%; 16 height: 100%; 17 top: 0; 18 left: 0; 19 z-index: -1; 20 filter: blur(25px); 21 border-radius: 20px; 22 background-color: #e499ff; 23 background-image: radial-gradient(at 47% 69%, hsla(17,62%,65%,1) 0px, transparent 50%), 24radial-gradient(at 9% 32%, hsla(222,75%,60%,1) 0px, transparent 50%); 25} 26 27.input__label { 28 display: block; 29 margin-left: 0.4em; 30 color: #000; 31 text-transform: uppercase; 32 font-size: 0.9em; 33 font-weight: bold; 34} 35 36.input__description { 37 font-size: 0.6em; 38 font-weight: bold; 39 text-align: center; 40 color: rgba(0, 0, 0, 0.5); 41} 42 43.input { 44 border: none; 45 outline: none; 46 width: 100%; 47 padding: 0.6em; 48 padding-left: 0.9em; 49 border-radius: 20px; 50 background: #fff; 51 transition: background 300ms, color 300ms; 52} 53 54.input:hover,.input:focus { 55 background: rgb(0, 0, 0); 56 color: #fff; 57}
2.1K views
2.1K views
MIT License