April 8, 2015

Search box animation using CSS

Search box animation using CSS

Just another experiment by me using CSS and jQuery. Here when the user hovers on the search icon it changes to a search box whre the user can type in.

When there is text typed in the search field the text field remains there. If there is no text entered or if its not hovered it changes back to search icon.


<div class="cntr">
    <div class="cntr-innr">
        <label class="search" for="inpt_search">
            <input id="inpt_search" type="text" />
        <p>Hover to see the magic.</p>


body {
  height: 100%;
  margin: 0;
body {
  background: #913d88;
  font: 13px monospace;
  color: #ffffff;
p {
  margin-top: 30px;
.cntr {
  display: table;
  width: 100%;
  height: 100%;
.cntr .cntr-innr {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
.search {
  display: inline-block;
  position: relative;
  height: 35px;
  width: 35px;
  box-sizing: border-box;
  margin: 0px 8px 7px 0px;
  padding: 7px 9px 0px 9px;
  border: 3px solid #ffffff;
  border-radius: 25px;
  -webkit-transition: all 200ms ease;
          transition: all 200ms ease;
  cursor: text;
.search:after {
  content: "";
  position: absolute;
  width: 3px;
  height: 20px;
  right: -5px;
  top: 21px;
  background: #ffffff;
  border-radius: 3px;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: all 200ms ease;
          transition: all 200ms ease;
.search:hover {
  width: 200px;
  margin-right: 0px;
.search:hover:after {
  height: 0px;
.search input {
  width: 100%;
  border: none;
  box-sizing: border-box;
  font-family: Helvetica;
  font-size: 15px;
  color: inherit;
  background: transparent;
  outline-width: 0px;


$("#inpt_search").on('focus', function () {

$("#inpt_search").on('blur', function () {
   if($(this).val().length == 0)

No comments:

Post a Comment

Popular Posts