Tạo hiệu ứng hover cho thanh tìm kiếm với CSS

Hôm nay, iZdesigner sẽ chia sẻ cho các bạn một mẫu form với hiệu ứng động khi rê chuột vào (hover), và mẫu này được làm hoàn toàn bằng CSS mà không cần phải sử dụng bất kì đoạn script nào.

HTML
Đầu tiên, các bạn sử dụng khung chuẩn html như sau :

<div class="cntr">
    <div class="cntr-innr">
      <label class="search" for="inpt_search">
            <input id="inpt_search" type="text" />
        </label>
    </div>
</div>

CSS
Sau đó, các bạn copy đoạn css bên dưới để tạo hiệu ứng động cho thanh tìm kiếm.

.cntr {
  display: table;
  width: 100%;
  height: 100%;
}
.cntr .cntr-innr {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
/*** STYLES ***/
.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;
  transition: all 200ms ease;
  cursor: text;
}
.search:after {
  content: "";
  position: absolute;
  width: 3px;
  height: 20px;
  right: -5px;
  top: 21px;
  background: #ffffff;
  border-radius: 3px;
  transform: rotate(-45deg);
  transition: all 200ms ease;
}
.search.active,
.search:hover {
  width: 200px;
  margin-right: 0px;
}
.search.active:after,
.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;
}

Rất đơn giản và dễ thực hiện phải không các bạn, mình tin rằng với mẫu tìm kiếm này, các bạn sẽ có nhiều lựa chọn cho việc thiết kế web của mình.