#e8e8e8
1.input-container { 2 width: 220px; 3 position: relative; 4} 5 6.icon { 7 position: absolute; 8 right: 10px; 9 top: calc(50% + 5px); 10 transform: translateY(calc(-50% - 5px)); 11} 12 13.input { 14 width: 100%; 15 height: 40px; 16 padding: 10px; 17 transition: .2s linear; 18 border: 2.5px solid black; 19 font-size: 14px; 20 text-transform: uppercase; 21 letter-spacing: 2px; 22} 23 24.input:focus { 25 outline: none; 26 border: 0.5px solid black; 27 box-shadow: -5px -5px 0px black; 28} 29 30.input-container:hover > .icon { 31 animation: anim 1s linear infinite; 32} 33 34@keyframes anim { 35 0%, 36 100% { 37 transform: translateY(calc(-50% - 5px)) scale(1); 38 } 39 40 50% { 41 transform: translateY(calc(-50% - 5px)) scale(1.1); 42 } 43}
Comments
MIT License