├── 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 |
--------------------------------------------------------------------------------