Search Bar Keren dengan HTML Jade

SAKJANESIP - Di postingan kali ini saya akan membahas cara membuat form pencarian with HTML Jade dengan mudah. Kode yang sangat ringan dan impresnya bagus sekali.

Simpel Search Bar

Search Bar Keren dengan HTML Jade

SCSS

.search
  input.search__input(placeholder="Search")
  button.fa.fa-search.search__button  

HTML

$background-color: #EAEDF2;
$button-color: #5AEED1;
$button-text-color: #fff;
$search-height: 50px;
$search-font-size: 14px;

// SEARCH BAR
.search {
  box-shadow: 0 20px 10px -10px rgba(200, 200, 200, .5);
  display: inline-block;
}

.search__input {
  border: 0;
  outline: 0;
  line-height: $search-height;
  font-size: $search-font-size;
  padding: 0 ($search-height - $search-font-size)/2;
  float: left;
}

.search__button {
  box-shadow: -10px 0 10px -5px rgba($button-color, .5);
  color: $button-text-color;
  background-color: $button-color;
  width: $search-height;
  line-height: $search-height;
  text-align: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  outline: 0;
  transition: box-shadow .3s ease-out;
  
  &:active {
    box-shadow: -10px 0 10px -10px rgba($button-color, .5);
  }
}

// lAMAN Tengah
html {
  background-color: $background-color;
  display: table;
  width: 100%;
  height: 100%;
  font-family: arial;
}
body {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

• DEMO

Demikian cara membuat Search Bar Keren dengan HTML Jade, Semoga bermanfaat.