"Search Box CSS3"
Bootstrap 4.1.1 Snippet by siberci

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="codescaptain.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<div class="search-box">
<input type="text" class="search-txt" placeholder="Arama Yap">
<a class="search-btn">
<i class="fas fa-search"></i>
</a>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body{
margin: 0;
padding: 0;
background-color: #fbc531;
}
.search-box{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
background:#353b48;
height: 60px;
border-radius: 50px;
padding: 10px;
}
.search-box:hover .search-txt{
width: 200px;
padding: 0 6px;
}
.search-box:hover .search-btn{
background: #fff;
}
.search-btn{
color:#e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #487eb0;
display: flex;
justify-content: center;
align-items: center;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Full Calendar
Awesome Search Box
Carousel with Search
Bootstrap 4 search Bar

Questions / Comments: