Search form revealed on :hover

by Konstantin Rouda

HTML

<div class="search">
    
      <form class="search__form" id="search__form">  
                        
        <div class="search__field">
          <input type="text" class="search__input" />       
        </div>
        
       <button type="submit" class="search__button" form="search__form">
        &#128269;</button>

      </form>
      
    </div>

CSS

HTML {
  font-family: "Open Sans", sans-serif, serif;
  font-size: 100%;
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  color: #3a3d40;
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

/*Actual Style*/

.search {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 250px;
  height: 70px;
  padding: .5em 1em; 
  margin: 5em auto; 0;
  background: rgb(176, 220, 178);
  //border: 1px solid red;
}

.search__form {
  position: relative;
  //border: 1px solid;
}

.search__field {
  position:absolute;
  top: .1em; right: 1.9em;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform .3s ease-out;
}

.search__input {
  border: none;
  outline: none;
  background: hsla(0, 0%, 100%, .5);
  border-bottom: 1px solid;
}

.search__form:hover > .search__field {
  transform: scaleX(1);
} 

.search__button {
  padding: .4em .65em;
  border: none;
  border-radius: 50%;
  background: #0bf;
}