Search button doesn't scale in with the rest of search bar

Question

I'm new to the whole CSS coding and sometimes I get stuck. I followed an online tutorial on how to make a search bar that is animated so it looks pleasing. I'm doing a website for my school project and I'm almost finished just adding few bits here and there. It's about technology from the beginning of the 20th century to our present day.

.search-pos {
  display: block;
  margin-left: auto;
  width: 330px;
  position: relative;
  top: -40px;
}

.search-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-55%, -55%);
  background: white;
  height: 40px;
  border-radius: 60px;
  padding: 10px;
}

.search-box:hover>.search-txt {
  width: 240px;
  padding: 0 4px;
}

.search-box:hover>.search-btn {
  background: white;
  padding: 10px;
}

.search-btn {
  color: black;
  float: center;
  width: 30px;
  height: 30px;
  border-radius: 80%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: white;
  font-size: 14px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
}

<div class="search-pos">
  <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>
</div>

I've tried changing the padding, positioning or even the height but nothing seems to work. I think I need to add another line of code but I'm unsure what it would be.

This what happens:

Image / Imgur

As you can witness the button doesn't stay inside the bar itself like it should.

Answer 1

For what i understand you need to change your css a little bit.

.search-pos {
  display: block;
  margin-left: auto;
  width: 330px;
height:40px;
  position: relative;
}

.search-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-55%, -55%);
  background: white;
  height: 40px;
  border-radius: 60px;
  padding: 10px;
display:flex;
}

.search-box:hover>.search-txt {
  width: 240px;
  padding: 0 4px;
}

.search-box:hover>.search-btn {
  background: white;
  padding: 10px;
}

.search-btn {
  color: black;
  float: center;
  width: 30px;
  height: 30px;
  border-radius: 80%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: white;
  font-size: 14px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
}

Let me know, if this solution helps you.

Answer 2

Like Dejan.S I did not get what is the problem. Be carreful you put a top in a relative class .search-pos, it doesnt work !

I copy your code in CodePen and I think the problem comes from in a other class or maybe in your $search.pos class

https://codepen.io/auxb/pen/WNQjjyp?editors=1100

(I replace the font icon by a img but is the same)

Tell me if this code satisfied you !

Answer 3

Try putting the code that handles the hover after the specified elements:

.search-box:hover>.search-txt

should come after

.search-txt

also

.search-box:hover>.search-btn

should come after

.search-btn

Hope that helps in ensuring the hover effects work as expected.

Also there is no CSS property such as float: center;