transitions + transform = slidey effect

css demo for someone on stackoverflow

HTML

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<li id="inputbar">
    <input type="search" id="search">
</li>
    
<button 
    id="searchtoolbar" 
    type="submit">.gg
</button>

CSS

#inputbar {
    border-color:red;
    list-style:none;
}
#search {
    background:#007F64;
    right: 300px;
    color: white;
    position: absolute;
    border: none;
    top: 18px;
    height: 27px;
    width: 0;
    padding: 8px 0;
    transition: all;
    /* Width and padding */
    transition-duration: .5s;
}
#search.searchshow {
    border-color: #41A940;
    outline:none;
    padding: 8px 4px;
    width: 177px;
}
#searchtoolbar {
    background:#007F64;
    color: white;
    position: absolute;
    right: 260px;
    top: 18px;
    border:none;
    font-size: 18px;
    font-weight: bold;
}

JavaScript

$(document).on("click", "#searchtoolbar", function () {
    var hasclass = $("#search").hasClass("searchshow");
    if (!hasclass) {
        $("#search").addClass("searchshow").focus();
    } else {
        $("#search").removeClass("searchshow");
    }

});