Hiệu ứng hover động cho thanh tìm kiếm với CSS

Hầu như mọi website hay blog cá nhân đều có một thanh tìm kiếm (search) giúp người dùng tìm kiếm những nội dung mà họ muốn xem nhanh nhất. Việc thiết kế những thanh tìm kiếm này không khó, nhưng nếu muốn tạo ấn tượng cho người dùng thì các bạn cần phải có một chút thủ thuật. Hôm nay, mình 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.

Xem Demo | Download

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;
  awidth: 100%;
  height: 100%;
}
.cntr .cntr-innr {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
/*** STYLES ***/
.search {
  display: inline-block;
  position: relative;
  height: 35px;
  awidth: 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;
  awidth: 3px;
  height: 20px;
  right: -5px;
  top: 21px;
  background: #ffffff;
  border-radius: 3px;
  transform: rotate(-45deg);
  transition: all 200ms ease;
}
.search.active,
.search:hover {
  awidth: 200px;
  margin-right: 0px;
}
.search.active:after,
.search:hover:after {
  height: 0px;
}
.search input {
  awidth: 100%;
  border: none;
  box-sizing: border-box;
  font-family: Helvetica;
  font-size: 15px;
  color: inherit;
  background: transparent;
  outline-awidth: 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.

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster