Một Số Button Với Icon Bằng Css Cho Blog/website

Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.

Đăng Nhập hoặc Đăng Ký

Diễn đàn Designer Việt Nam Trang chủ Diễn đàn > Thiết kế web > HTML - CSS - JS - PHP - ASP >

1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé. Loại bỏ thông báo

Một số button với icon bằng css cho blog/website

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi TrollVL, 4/12/13.

Lượt xem: 14,064

1. TrollVL Thành viên cấp 2

   Ơ bài viết này mình sẽ giới thiệu bộ button với icon tương ứng và 3 button của các mạng xã hội Facebook, Twitter và G+. Mời bạn xem các button demo bằng hình ảnh bên dưới hoặc click vào link sau để xem demo trực tiếp CSS Code: . button { display:inline-block; white-space:nowrap; background-color:#ddd; background-image:-webkit-gradient(linear,left top,left bottom,from(#eee),to(#ccc)); background-image:-webkit-linear-gradient(top,#eee,#ccc); background-image:-moz-linear-gradient(top,#eee,#ccc); background-image:-ms-linear-gradient(top,#eee,#ccc); background-image:-o-linear-gradient(top,#eee,#ccc); background-image:linear-gradient(top,#eee,#ccc); border:1px solid #777; padding:0 1.5em; margin:0.5em; font:bold 1em/2em Arial,Helvetica; text-decoration:none; color:#333; text-shadow:0 1px 0 rgba(255,255,255,.8); -moz-border-radius:.2em; -webkit-border-radius:.2em; border-radius:.2em; -moz-box-shadow:0 0 1px 1px rgba(255,255,255,.8) inset,0 1px 0 rgba(0,0,0,.3); -webkit-box-shadow:0 0 1px 1px rgba(255,255,255,.8) inset,0 1px 0 rgba(0,0,0,.3); box-shadow:0 0 1px 1px rgba(255,255,255,.8) inset,0 1px 0 rgba(0,0,0,.3); } . button:hover { background-color:#eee; background-image:-webkit-gradient(linear,left top,left bottom,from(#fafafa),to(#ddd)); background-image:-webkit-linear-gradient(top,#fafafa,#ddd); background-image:-moz-linear-gradient(top,#fafafa,#ddd); background-image:-ms-linear-gradient(top,#fafafa,#ddd); background-image:-o-linear-gradient(top,#fafafa,#ddd); background-image:linear-gradient(top,#fafafa,#ddd); } . button:active { -moz-box-shadow:0 0 4px 2px rgba(0,0,0,.3) inset; -webkit-box-shadow:0 0 4px 2px rgba(0,0,0,.3) inset; box-shadow:0 0 4px 2px rgba(0,0,0,.3) inset; position:relative; top:1px; } . button:focus { outline:0; background:#fafafa; } . button:before { background:#ccc; background:rgba(0,0,0,.1); float:left; width:1em; text-align:center; font-size:1.5em; margin:0 1em 0 -1em; padding:0 .2em; -moz-box-shadow:1px 0 0 rgba(0,0,0,.5),2px 0 0 rgba(255,255,255,.5); -webkit-box-shadow:1px 0 0 rgba(0,0,0,.5),2px 0 0 rgba(255,255,255,.5); box-shadow:1px 0 0 rgba(0,0,0,.5),2px 0 0 rgba(255,255,255,.5); -moz-border-radius:.15em 0 0 .15em; -webkit-border-radius:.15em 0 0 .15em; border-radius:.15em 0 0 .15em; pointer-events:none; } button. button,input. button { cursor:pointer; overflow:visible; } button::-moz-focus-inner { border:0; padding:0; } input::-moz-focus-inner {padding:.4em;} . button[disabled],. button[disabled]:hover,. button.disabled,. button.disabled:hover { background:#eee; color:#aaa; border-color:#aaa; cursor:default; text-shadow:none; position:static; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; } .add:before {content:"\271A";} .edit:before {content:"\270E";} .delete:before {content:"\2718";} .save:before {content:"\2714";} .email:before {content:"\2709";} .like:before {content:"\2764";} .next:before {content:"\279C";} .star:before {content:"\2605";} .spark:before {content:"\2737";} .play:before {content:"\25B6";} /* Button Facebook & Twitter */ .tw,.fb,.gl,.tw:hover,.fb:hover,.gl:hover { background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,.5)),to(rgba(255,255,255,0))); background-image:-webkit-linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,0)); background-image:-moz-linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,0)); background-image:-ms-linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,0)); background-image:-o-linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,0)); background-image:linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,0)); } .tw,.tw:focus {background-color:#88E1E6;} .fb,.fb:focus { background-color:#3C5A98; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.4); } .gl,.gl:focus { background-color:#ff8000; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.4); } .tw:hover {background-color:#b1f0f3;} .fb:hover {background-color:#879bc3;} .gl:hover {background-color:#ff5000;} .tw:before { content:"t"; background:#91cfd3; background:rgba(0,0,0,.1); color:#fff; font-family:verdana; text-shadow:0 1px 0 rgba(0,0,0,.4); } .fb:before { content:"f"; background:#4467ac; background:rgba(0,0,0,.1); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.4); } .gl:before { content:"G"; background:#ff6000; background:rgba(0,0,0,.1); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.4); } HTML Code: <a href="" class=" button add">Add</a> <a href="" class=" button edit">Edit</a> <a href="" class=" button delete">Delete</a> <a href="" class=" button save">Save</a> <a href="" class=" button email">Send email</a> <a href="" class=" button like">Like</a> <a href="" class=" button next">Next</a> <a href="" class=" button star">Favourite</a> <a href="" class=" button spark">Spark</a> <a href="" class=" button play">Play</a> HTML cho các button mạng xã hội Code: <a href="http://twitter.com/Your-Twitter" class=" button tw">Follow me</a> <a href="http://www.facebook.com/Your-Facebook" class=" button fb">Become a fan</a> <a href="https://plus.google.com/Your-profil-G+" class=" button gl">Add me google +</a>

   ...

   Xem thêm các chủ đề cùng chuyên mục

   • Tuyển dụng thiết kế UI/UX19/08/2016
   • [Share] Hơn 100 Khóa học lập trình, thiết kế website miễn phí từ Udemy19/02/2019
   • Lỗi 403 khi Clone web bằng domain và Hosting của Godaddy17/07/2018
   • [Help]Khoanh vùng ảnh tạo liên kết08/03/2017
   • Hướng dẫn làm form Insert Update Delete chỉ với 2 dòng code gòm cả Validate Form các kiểu06/02/2017
   • Share bộ chuông nhạc cực cực HOT dành cho giáng sinh 201207/12/2012
   • Tổng hợp bộ Video học HTML, CSS, PHP cực hay cho người mới28/11/2014
   • Cần hướng dẫn về code php cập nhật database21/08/2016
   • [PHP] Gửi mail bằng Ajax (đơn giản)30/06/2014
   • Nhà Thịnh Liệt oto vào tận nhà 110m2 x 4 tầng. LH 0338052399.15/06/2020
   • Windows Mobile Web Form với Visual Studio 200810/12/2012
   • hỗ trợ fix lỗi web php không có css responsive22/01/2019
   • Trang web nào hữu ích cho việc học và lập trình web về css-css3, html và javascript19/05/2017
   • xin hướng dẫn làm theme reponsive cho web phim24/10/2017
   • [CSS3] Giả lập hiệu ứng loading của Windows 810/03/2014
   Tham gia nhóm Thích trang TrollVL, 4/12/13 #1 Phạm Hữu Dư thích bài viết này

(Bạn cần phải đăng nhập hoặc đăng ký để viết bài ở đây) Hiển thị nội dung Bỏ qua Từ khóa:

• blog
• button
• button css
• css
• css button
• icon
• website

Ủng hộ diễn đàn

Tên của bạn hoặc địa chỉ email: Bạn đã có tài khoản chưa?

• Chưa, tôi muốn tạo một tài khoản.
• Rồi, mật khẩu của tôi là:
• Click vào đây nếu bạn quên mật khẩu

Ghi nhớ đăng nhập Đăng ký thành viên Đăng nhập

Chủ đề mới nhất

• Thùng rác 660 lít dung tích lớn mua loại... nhtuyenbk đăng vào 19/12/25 at 2:40 PM
• AMD giới thiệu vi xử lý EPYC Embedded 2005 meo1725 đăng vào 19/12/25 at 11:09 AM
• Rổ đựng Xoài 50 x 39 x 30mm - Chất Lượng... nhtuyenbk đăng vào 16/12/25 at 11:46 PM
• [5]Mẫu mộ tháp đá đẹp bán tại Quảng Nam dabaochau đăng vào 10/12/25
• AMD KHẲNG ĐỊNH VỊ THẾ AI: ZYPHRA RA MẮT... meo1725 đăng vào 8/12/25
• In nhãn tại sao nó quan trọng với doanh... clik41 đăng vào 6/12/25
• [Sóc Trăng]Thi công mộ tháp đá tại Sóc... dabaochau đăng vào 4/12/25
• [20]Mẫu bảo tháp đá để tro cốt bán chạy... dabaochau đăng vào 2/12/25
• Những lưu ý và ý nghĩa khi xây miếu thờ... phamthuannb đăng vào 30/11/25
• Bán am đá thờ Thần Linh cho gia đình &... phamthuannb đăng vào 29/11/25
• [2025] Mẫu mộ bảo tháp đá lục giác đựng... dabaochau đăng vào 26/11/25
• AMD Cam Kết Hỗ Trợ Dài Hạn Cho dòng RADEON cũ meo1725 đăng vào 25/11/25
• AMD Instinct MI430X: Thúc đẩy Làn sóng AI... meo1725 đăng vào 25/11/25
• [VL64] Tháp đá bán tại Vĩnh Long đẹp chất... dabaochau đăng vào 19/11/25
• Đánh giá Threadripper 9000 PRO: Zen 5 Tái... meo1725 đăng vào 18/11/25
• trong 4rum mình có bạn nào yêu thích khám... lovenhoc.tk đăng vào 14/11/25
• TG63 Quy trình xây tháp mộ bán tại Tiền... dabaochau đăng vào 12/11/25

Đang tải...

Chủ đề đáng chú ý

• Rổ đựng Xoài 50 x 39 x 30mm - Chất Lượng... nhtuyenbk đăng vào 16/12/25 at 11:46 PM
• AMD giới thiệu vi xử lý EPYC Embedded 2005 meo1725 đăng vào 19/12/25 at 11:09 AM
• Thùng rác 660 lít dung tích lớn mua loại... nhtuyenbk đăng vào 19/12/25 at 2:40 PM

Đang tải...

Theo dõi trên Youtube

Diễn đàn Designer Việt Nam Trang chủ Diễn đàn > Thiết kế web > HTML - CSS - JS - PHP - ASP >