<form class="search">
  <input type="text" required />
  <button class="exit" type="reset">
</form>

$darkgreen: #4C797F;
$lightgreen: #BCE4D2;

$speed: .5s;

body {
  background: $darkgreen;
  text-align: center;
}

.search {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  width: 500px;
  
  input {
    cursor: pointer;
    margin: 0 auto;
    color: $lightgreen;
    width: 60px;
    height: 60px;
    border: none;
    font-size: 50px;
    padding: 10px;
    position: absolute;
    top: 0px;
    left: 50%;
    border-radius: 100%;
    box-shadow: 0 0 0 5px $lightgreen;
    background: transparent;
    transition: width .25s ease-in-out, border-radius .5s ease-in-out, left .35s ease;
    transition-delay: .5s, .75s, .5s;
    
    &:focus, &:valid {
      border-radius: 1%;
      outline: none;
      position: absolute;  
      transition-delay: 1s, .3s, 1s;
      width: 100%;
      left: 15%;
      
      +button.exit {
        pointer-events: all;
        transition-delay: 0s;
        position: absolute;
        padding: 0;
        border: 0;
        top: 50%;
        left: 99%;
        background: $lightgreen; 
        border-radius: 10%;
        color: $lightgreen;
        outline: none;
        height: 5px;
        width: 50px;
        transform: rotate(45deg) translate(35px, 15px);
        transition: transform .25s ease-in-out, left .3s ease-in-out;
        transition-delay: .25s, 1s;

        &:focus {
          outline: none;
        }
        
        &:after {
          content: '';
          position: absolute;
          padding: 0;
          border: 0;
          background: $lightgreen; 
          border-radius: 10%;
          color: $lightgreen;
          outline: none;
          height: 5px;
          width: 50px;
          transform: rotate(90deg);
          transition: transform .25s ease-in-out;
          transition-delay: .5s;
          cursor: pointer;
        }
        
      }
    }
  }
  
  .exit {
    position: absolute;
    padding: 0;
    border: 0;
    top: 50%;
    left: 50%;
    background: $lightgreen; 
    border-radius: 10%;
    color: $lightgreen;
    outline: none;
    height: 5px;
    width: 50px;
    transform: rotate(45deg) translate(110px, 25px);
    transition: transform .25s ease-in-out, left .25s ease-in-out;
    transition-delay: 1s, .5s;
    cursor: pointer;
    
    &:focus {
      outline: none;
    }
    
    &:after {
      content: '';
      position: absolute;
      padding: 0;
      border: 0;
      top: 0%;
      left: 0%;
      background: $lightgreen; 
      border-radius: 10%;
      color: $lightgreen;
      outline: none;
      height: 5px;
      width: 50px;
      transform: rotate(180deg);
      transition: transform .25s ease-in-out;
      transition-delay: .75s;
      cursor: pointer;
    }
  }
}

// inspired by Gregor Adams pen here: https://codepen.io/pixelass/pen/PqMpYL