A Pen by Sam Markiewicz.

index.slim

form
  fieldset
    input type="search"
    button type="submit"
      i class="fa fa-search"

Search-field-w-animation.markdown

Search field w/animation

Make the submit button appears when you focus on the text field. Done with css only.

A Pen by Sam Markiewicz on CodePen.

License.

style.sass

html
  background: #1E8BC3

body
  width: 300px
  margin: 0 auto
  padding-top: 8rem

fieldset
  position: relative
  display: inline-block
  padding: 0 0 0 40px
  background: white
  border: 1px solid #3A539B
  border-radius: 5px
 
input,
button
  position: relative
  width: 200px
  height: 50px
  padding: 0
  display: inline-block
  float: left
 
input 
  color: #666
  z-index: 2
  border: 0 none
  &:focus
    outline: 0 none
    & + button
      transform: translate(0, 0)
      transition-duration: .3s
      .fa
        transform: translate(0px, 0)
        transition-duration: .3s
        color: white
      
 
button
  z-index: 1
  width: 50px
  border: 0 none
  background: #3A539B
  transform: translate(-50px, 0)
  transition-duration: .3s

.fa-search
  font-size: 1.4rem
  color: #BBB
  z-index: 3
  top: 25%
  transform: translate(-190px, 0)
  transition-duration: .3s
  transition: all .1s ease-in-out