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" />



$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;


Demo | Download

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

Leave a Reply

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