I've been working on coding a CSS text box. When you hover over the button in the provided link, you'll notice that the 'Type to search' functionality is working smoothly as it moves to the right.
My current focus is on syncing the background of the button with the text box itself.
The main objective here is to expand the box only towards the right side.
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js">
</script>`enter code here`
</head>
<head>
<title>First Experience with CCS</title>
</head>
<head>
<style>
h1 {
color: orange;
text-align: left;
}
</style>
</head>
<body>
<h1>
<span style="font-family:Arial">Welcome to Search Box</span>
</h1>
</body>
<head>
<body>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
</head>
</body>
</html>
body {
margin: 0;
padding: 0;
background: red;
}
.search-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-txt{
width: 240px;
padding: 0 6px;
}
.search-box:hover > .search-btn{
background: white;
}
.search-btn{
float: left;
color: red;
width: 40px;
height: 40px;
border-radius: 50%;
background: none;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.search-txt{
position: absolute;
float: right;
border: none;
background: none;
outline: none;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}