Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > Design Search bar không cần sử dụng Images
Design Search bar không cần sử dụng Images
Nguyễn Trung Hiếu
Share Code Web Company 2012

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

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

Related Posts

Tác giả: 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

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 6.267 hits
%d bloggers like this: