Expanding text box button using CSS3

Expanding text box button using CSS3

A search button by Sam D which becomes the search bar when clicked on, reducing the need for space and looking great the whole time. Supports virtually all browsers and touch, looks great, and Apple stole it for their recent redesign.

HTML Markup

<form class="search-container" action="//llamaswill.tumblr.com/search">
  <input id="search-box" type="text" class="search-box" name="q" />
  <label for="search-box"><span class="glyphicon glyphicon-search search-icon"></span></label>
  <input type="submit" id="search-submit" />
</form>

 

The CSS

$tl: 0.6s; // transition length


body {
  margin: 5%;
}

.search-box {
  transition: width $tl, border-radius $tl, background $tl, box-shadow $tl;
  width: 40px;height: 40px;
  border-radius: 20px;border: none;
  cursor: pointer;
  background: rgb(235, 235, 235);
  & + label .search-icon {    color: black    }
  &:hover {
    color: white;
    background: rgb(200, 200, 200);
    box-shadow: 0 0 0 5px rgb(61, 71, 82);
    & + label .search-icon {    color: white    }
  }
  &:focus {
    transition: width $tl cubic-bezier(0,1.22,.66,1.39), border-radius $tl, background $tl;
    border: none;outline: none;
    box-shadow: none;
    padding-left: 15px;
    cursor: text;
    width: 300px;
    border-radius: auto;
    background: rgb(235, 235, 235);
    color: black;
    & + label .search-icon {    color: black;    }
  }
  &:not(:focus) {    text-indent:-5000px;    } // for more-graceful falling back (:not browsers likely support indent)
}

#search-submit {
  position: relative;left: -5000px;
}

.search-icon {
  position: relative;
  left: -30px;
  color: white;
  cursor: pointer;
}

http://www.youtube.com/watch?v=nN-LyEjmsKA

Demo | Download

See the Pen Expanding text box/button by Sam D (@llamaswill) on CodePen.

One Reply to “Expanding text box button using CSS3”

Leave a Reply

Your email address will not be published. Required fields are marked *