View it at dribbble or Behance
A Pen by Marco Biedermann on CodePen.
Created
September 3, 2013 02:51
-
-
Save Dev-Dipesh/6419219 to your computer and use it in GitHub Desktop.
A Pen by Marco Biedermann.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ( function() { | |
| $('#btn-search').on('click', function(e) { | |
| e.preventDefault(); | |
| $('#search').animate({width: 'toggle'}).focus(); | |
| }); | |
| } () ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment