├── index.html └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Search Box 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: black; 5 | } 6 | 7 | .search-box { 8 | position: absolute; 9 | top: 50%; 10 | left: 50%; 11 | transform: translate(-50%, -50%); 12 | background: #c3b1e1; 13 | height: 40px; 14 | border-radius: 40px; 15 | padding: 10px; 16 | } 17 | 18 | .search-box:hover > .search-text { 19 | width: 240px; 20 | padding: 0 9px; 21 | } 22 | 23 | .search-box:hover > .search-btn { 24 | background: white; 25 | color: #982aff; 26 | } 27 | 28 | .search-btn { 29 | color: black; 30 | float: right; 31 | width: 40px; 32 | height: 40px; 33 | border-radius: 50%; 34 | background: white; 35 | display: flex; 36 | justify-content: center; 37 | align-items: center; 38 | transition: 0.4s; 39 | cursor: pointer; 40 | text-decoration: none; 41 | } 42 | 43 | .search-btn > i { 44 | fontsize: 30px; 45 | } 46 | 47 | .search-text { 48 | border: none; 49 | background: none; 50 | outline: none; 51 | float: left; 52 | padding: 0; 53 | color: rgb(10, 10, 10); 54 | font-size: 16px; 55 | font-weight: normal; 56 | transition: 0.4s; 57 | line-height: 40px; 58 | width: 0px; 59 | } 60 | --------------------------------------------------------------------------------