View it at dribbble or Behance
A Pen by Marco Biedermann on CodePen.
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Search Bar Animation</title> | |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans"> | |
</head> | |
<body> | |
<div class="container"> | |
<form action="javascript:void(0);" method="get"> | |
<fieldset> | |
<ul class="toolbar clearfix"> | |
<li><a href="#" class="fontawesome-heart"></a></li> | |
<li><a href="#" class="fontawesome-eye-open"></a></li> | |
<li><a href="#" class="fontawesome-comment"></a></li> | |
<li><input type="search" id="search" placeholder="What are you looking for?"></li> | |
<li><button type="submit" id="btn-search"><span class="fontawesome-search"></span></button></li> | |
</ul> | |
</fieldset> | |
</form> | |
</div> <!-- end container --> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
</body> | |
</html> |
( function() { | |
$('#btn-search').on('click', function(e) { | |
e.preventDefault(); | |
$('#search').animate({width: 'toggle'}).focus(); | |
}); | |
} () ); |
@charset "utf-8"; | |
/* CSS Document */ | |
/* ---------- FONTAWESOME ---------- */ | |
/* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */ | |
/* ---------- http://weloveiconfonts.com/ ---------- */ | |
@import url(http://weloveiconfonts.com/api/?family=fontawesome); | |
a[class*="fontawesome-"]:before, | |
span[class*="fontawesome-"]:before { | |
display: block; | |
font-family: 'FontAwesome', sans-serif; | |
-webkit-font-smoothing: antialiased; | |
} | |
/* ---------- GENERAL ---------- */ | |
body { | |
background: #ccc; | |
font: 87.5%/1.5em 'Open Sans', sans-serif; | |
margin: 0; | |
} | |
a { | |
text-decoration: none; | |
} | |
button { | |
-webkit-appearance: button; | |
background: transparent; | |
border: 0; | |
cursor: pointer; | |
font-family: inherit; | |
font-size: 100%; | |
line-height: inherit; | |
margin: 0; | |
padding: 0; | |
text-transform: none; | |
} | |
button::-moz-focus-inner { | |
border: 0; | |
padding: 0; | |
} | |
fieldset { | |
border: 0; | |
margin: 0; | |
padding: 0; | |
} | |
input { | |
border: 0; | |
font-family: inherit; | |
font-size: 100%; | |
line-height: inherit; | |
margin: 0; | |
padding: 0; | |
} | |
input:focus { | |
outline: none; | |
} | |
input[type="search"] { | |
-webkit-appearance: textfield; | |
-webkit-box-sizing: content-box; | |
-moz-box-sizing: content-box; | |
box-sizing: content-box; | |
} | |
input[type="search"]::-webkit-search-cancel-button, | |
input[type="search"]::-webkit-search-decoration { | |
-webkit-appearance: none; | |
} | |
input::-moz-focus-inner { | |
border: 0; | |
padding: 0; | |
} | |
ul { | |
list-style: none; | |
margin: 0; | |
padding: 0; | |
} | |
/* ---------- CLASSES ---------- */ | |
.clearfix { *zoom: 1; } | |
.clearfix:before, .clearfix:after { | |
content: ""; | |
display: table; | |
} | |
.clearfix:after { clear: both; } | |
.container { | |
left: 50%; | |
margin: -17px 0 0 -186px; | |
position: absolute; | |
top: 50%; | |
width: 372px; | |
} | |
/* ---------- TOOLBAR ---------- */ | |
.toolbar { | |
color: #fff; | |
} | |
.toolbar li { | |
float: left; | |
} | |
.toolbar li:first-child a { border-radius: .5em 0 0 .5em; } | |
.toolbar li:last-child button { border-radius: 0 .5em .5em 0; } | |
.toolbar a, | |
.toolbar input[type="search"], | |
.toolbar button { | |
background: #3598db; | |
color: #fff; | |
display: block; | |
padding: .5em 1em; | |
position: relative; | |
} | |
.toolbar a:hover, | |
.toolbar input[type="search"]:hover, | |
.toolbar input[type="search"]:focus, | |
.toolbar button:hover { | |
background: #2a80b9; | |
} | |
.toolbar input[type="search"] { | |
display: none; | |
height: 21px; | |
width: 177px; | |
} | |
.toolbar input[type="search"]::-webkit-input-placeholder { color: #fff; } | |
.toolbar input[type="search"]::-moz-placeholder { color: #fff; opacity: 1; } | |
.toolbar input[type="search"]:-moz-placeholder { color: #fff; opacity: 1; } | |
.toolbar input[type="search"]:-ms-input-placeholder { color: #fff; } |