A CodePen by Kaushik. Slide out search bar - A search icon that reveals a search bar on hover

index.haml

%html
  %body
    %div.container
      %div.search-container
        %input{:type => "text", :placeholder => "search"}
        %a.button
          %i.icon-search

script.js

/*  Font Awesome
    the iconic font designed for use with Twitter Bootstrap
    -------------------------------------------------------
    The full suite of pictographic icons, examples, and documentation
    can be found at: http://fortawesome.github.com/Font-Awesome/

    License
    -------------------------------------------------------
    The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0:
    http://creativecommons.org/licenses/by/3.0/ A mention of
    'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable
    source code is considered acceptable attribution (most common on the web).
    If human readable source code is not available to the end user, a mention in
    an 'About' or 'Credits' screen is considered acceptable (most common in desktop
    or mobile software).

    Contact
    -------------------------------------------------------
    Email: dave@davegandy.com
    Twitter: http://twitter.com/fortaweso_me
    Work: http://lemonwi.se co-founder

    */

style.sass

@import "compass"
*
  box-sizing: border-box
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  font-family: "Cabin"

body
  background: #FDF6E3

.container
  display: block
  width: 25em
  margin: 100px auto

.search-container
  overflow: hidden
  float: right
  height: 4em
  width: 4em
  border-radius: 2em
  box-shadow: 0 0 5px #6A5D4F
  -moz-transition: all 0.35s
  -webkit-transition: all 0.35s
  &:hover
    width: 25em
    border-radius: 5px 2em 2em 5px
    .button
    input
      display: inline-block
      width: 19em
      padding: 10px

input
  -moz-appearance: none
  -webkit-appearance: none
  appearance: none
  float: left
  width: 0em
  height: 2em
  margin: 1em
  margin-right: -4.5em
  background: #fff
  color: #6A5D4F
  font-size: 1em
  font-weight: 600
  padding: 0px
  border: 0
  border-radius: 5px
  box-shadow: 0 1px 5px rgba(0,0,0,0.2) inset
  text-shadow: 0 1px 1px rgba(0,0,0,0.15)
  -moz-transition: all 0.25s
  -webkit-transition: all 0.25s
  &:focus
    outline: none
    box-shadow: 0 -1px 1px rgba(255,255,255,0.25), 0 1px 5px rgba(0,0,0,0.15)

.button
  float: right
  width: 1.75em
  height: 1.75em
  margin: 0.125em
  background: #6A5D4F
  text-align: center
  font-size: 2em
  color: #FDF6E3
  border-radius: 50%
  box-shadow: 0 -1px 1px rgba(255,255,255,0.25), 0 1px 1px rgba(0,0,0,0.25)
  text-shadow: 0 -2px 1px rgba(0,0,0,0.3)
  i
    margin-top: 0.3em
  &:active
    border: 0 !important
    text-shadow: 0 0 0