<html>
<head>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<title>Arama Kutusu</title>
</head>
<body>
<div class="arama-kutusu">
<input class="arama-yazi" type="text" name"" placeholder="Arayacağınız Kelime">
<a class="arama-buton" href="#">
<i class="fas fa-search"></i>
</a>
</div>
body {
margin: 0;
padding: 0;
background: #e74c3c;
}
.arama-kutusu {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #95a5a6;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.arama-kutusu:hover > .arama-yazi{
width: 240px;
padding: 0 6px;
}
.arama-kutusu:hover > .arama-buton{
background: white;
}
.arama-buton {
color: #e74c3c;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #95a5a6;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.arama-yazi {
border:none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.