Design Search bar không cần sử dụng Images

search bar

Hướng dẫn thiết kế thanh search bao gồm nút nhập và button search đẹp mắt mà không cần phải sử dụng ảnh, chỉ cần sử dụng CSS3 là đủ.

Xem qua demo nhé
search bar
OK!, bắt tay vào thiết kế nút search của chúng ta nhé. Mã HTML của chúng ta rất đơn giản

Nút search thì thường bao gồm 1 thẻ input, 1 nút button, và 2 thẻ này được nằm trong thẻ form để có thể gửi dữ liệu đi.
Đầu tiên là định dạng bằng css các thuộc tính cơ bản

Phần thứ 2 cũng là phần quan trọng nhất, đó là thiết kế nút search

Vậy là xong rồi đó, hy vọng với cách thiết kế này, sẽ giúp ích cho project của các bạn thêm đẹp hơn. Chúc thành công!

Bài viết được chia sẻ bởi
Sharecodeweb.net

Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com