Material Design Inspired Morphing Search Input with jQuery and CSS3

A cool material design inspired search effect that morphs a search icon into a fullscreen search input with CSS3 transitions. jQuery is only used to add/remove CSS classes as you toggle the search effect.

How to use it:

1. Create a search button on your webpage.

<div class="control" tabindex="1">
  <div class="btn"></div>
  <i class="icon-search ion-search"></i> 
</div>

2. Create a search form with a close button.

<i class="icon-close ion-ios-close-empty"></i>
<div class="form">
  <input class="input-search" placeholder="Start Typing" type="text">
</div>

3. The required CSS/CSS3 styles.

body.mode-search .form,
body.mode-search .icon-close {
  opacity: 1;
  transform: none;
  pointer-events: all;
}

body.mode-search .control .icon-search { opacity: 0; }

body.mode-search .control .btn { transform: scale(70); }

.control {
  width: 64px;
  height: 64px;
  position: absolute;
  bottom: -32px;
  right: 50px;
  cursor: pointer;
}

.control .icon-search,
.control .icon-close { transition: 0.2s ease-in-out; }

.control:hover .btn { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }

/* Button */


.btn {
  width: 64px;
  height: 64px;
  border-radius: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: #e91e63;
  outline: 0;
  transform-origin: 50%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-search {
  position: absolute;
  top: 18px;
  left: 20px;
  font-size: 28px;
}

.icon-close {
  position: fixed;
  top: 30px;
  right: 30px;
  color: #FFF;
  font-size: 80px;
  opacity: 0;
  transform: translate(10px, 0) rotate(90deg);
  transition: all 0.3s ease-in-out;
}

.form {
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50px;
  margin-top: -40px;
  pointer-events: none;
  opacity: 0;
  transform: translate(40px, 0);
  transition: all 0.3s ease-in-out;
}

.form input {
  color: #fff;
  font-size: 54px;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  box-sizing: border-box;
  outline: 0;
  font-weight: 200;
}
.form ::-webkit-input-placeholder {
 color: #EEE;
}
.form :-moz-placeholder {
 color: #EEE;
 opacity: 1;
}
.form ::-moz-placeholder {
 color: #EEE;
 opacity: 1;
}
.form :-ms-input-placeholder {
 color: #EEE;
}

4. Load the needed jQuery library at the bottom of the web page.

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script> 

5. The jQuery script to active the morphing search input.

$('.control').click(function () {
  $('body').addClass('mode-search');
  $('.input-search').focus();
});
$('.icon-close').click(function () {
  $('body').removeClass('mode-search');
});

---

This awesome jQuery plugin is developed by Luca Dimola. For more Advanced Usages, please check the demo page or visit the official website.