<input id='search-btn' type='checkbox'/>
<label for='search-btn'>Show search bar</label>
<input id='search-bar' type='text' placeholder='Search...'/>

$btn-d: 5em;
$txt-w: 4*$btn-d;
$txt-h: .65*$btn-d;
$txt-c: #ffeacc;
$mag-d: .5*$txt-h;
$mag-f: .125;
$mag-w: $mag-f*$mag-d;
$mag-c: #000;
$t: .65s;

*, :before, :after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font: inherit
}

html { overflow-x: hidden }

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  min-width: 400px; min-height: 100vh;
  background: #252525
}

[id='search-btn'] {
  position: absolute;
  left: -100vw;
  
  ~ * {
    --i: var(--pos, 1);
    --j: calc(1 - var(--i))
  }
  
  &:checked ~ * { --pos: 0 }
}

[for='search-btn'] {
  order: 1;
  overflow: hidden;
  position: relative;
  z-index: 2;
  margin-left: -.25*$btn-d;
  width: $btn-d; height: $btn-d;
  border-radius: 50%;
  transform: translate(var(--pos, -.5*$txt-w)) rotate(45deg);
  background: hsl(calc(336 - var(--i)*269), calc(77% + var(--i)*2%), calc(49% + var(--i)*13%));
  text-indent: -100vw;
  transition: $t ease-out;
  cursor: pointer;
  
  &:before, &:after {
    position: absolute;
    top: 50%; left: 50%;
    margin: -.5*$mag-d;
    width: $mag-d; height: $mag-d;
    transition: inherit;
    content: ''
  }
  
  &:before {
    margin-top: -.4*$mag-w;
    height: $mag-w;
    transform-origin: 100% 0;
    transform: translate(var(--pos, .25*$mag-d)) 
      scalex(calc(1 - var(--i)*.5));
    background: currentcolor;
  }
  
  &:after {
    border: solid $mag-w currentcolor;
    border-radius: calc(var(--i)*50%);
    transform: translate(var(--pos, -.25*$mag-d)) 
      scalex(calc(var(--j)*#{$mag-f} + var(--i)));
    box-shadow: inset 0 0 0 calc(var(--j)*#{.5*$mag-d}) currentcolor;
    transition-property: border-radius, transform, box-shadow;
    transition-timing-function: 
      cubic-bezier(calc(var(--j)*.42),0,calc(1 - var(--i)*.42),1), 
      cubic-bezier(calc(var(--i)*.42),0,calc(1 - var(--j)*.42),1)
  }
}

[id='search-bar'] {
  margin-right: -.25*$btn-d;
  border: none;
  padding: 0 1em;
  width: $txt-w; height: $txt-h;
  border-radius: $txt-h;
  transform: translate(var(--pos, .5*$txt-w));
  background: #3f324d;
  clip-path: inset(-2em var(--pos, 100%) -2em -2em);
  color: #fff;
  font: 1em century gothic, verdana, arial, sans-serif;
  transition: $t;
  
  &::placeholder {
    opacity: .5;
    color: inherit;
    font-size: .875em;
    letter-spacing: 1px;
    text-shadow: 0 0 1px, 0 0 2px
  }
  
  &:focus {
    outline: none;
    box-shadow: 0 0 1.5em $txt-c, 0 1.25em 1.5em rgba(#000, .2);
    background: $txt-c;
    color: #000;
  }
}