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,100

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

   • Tạo website reponsive đơn giản trong 3 bước với media query css323/04/2015
   • Kiểm tra người dùng đã ấn phím nào ?29/03/2017
   • Không cho người dùng nhập vào chữ hoặc ký tự vào input-text thì làm như thế nào?02/04/2017
   • [Share] Script Responsive CSS3 Portfolio Gallery được mua trên Codecanyon13/08/2015
   • Share code javascript tuyết rơi đẹp lung linh đây07/12/2012
   • Cần hướng dẫn về code php cập nhật database21/08/2016
   • [PHP+CSS+JS] Metro UI19/07/2012
   • Animation CSS05/08/2016
   • Giáo trình thiết kế web bằng HTML31/12/2015
   • (Help)Bóc tách dữ liệu web26/12/2021
   • Share code javascript hoa mai đào rơi trên website nhân dịp Tết27/01/2016
   • Tạo thanh Load trang giống Youtube cho Website của bạn03/04/2016
   • [JS] 2 thư viện javascript phân trang hiệu quả21/07/2014
   • Có ai biết về html vào giúp em được không ak29/10/2016
   • Chuyển đổi tiếng Việt có dấu thành không dấu trong asp.net Website27/12/2012
   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

• [ 86 Bình Thuận ] Xây am thờ để hũ tro... dabaochau đăng vào 3/2/26 at 9:27 AM
• Chia sẻ bộ thư viện Revit đầu cột , phù... dohoasaigondm đăng vào 1/2/26 at 2:36 PM
• Khóa học sketchup 3D chuyên plugin dựng... dohoasaigondm đăng vào 1/2/26 at 2:13 PM
• [90] Mẫu am thờ để hũ tro cốt bán tại... dabaochau đăng vào 30/1/26 at 9:12 AM
• 70 Mẫu am để tro cốt đẹp bán tại Tây Ninh... dabaochau đăng vào 29/1/26
• Mua code Unlock iPhone 17 Pro Max lên quốc tế kimanh_gsm đăng vào 24/1/26
• [69CM]Giá bán am thờ đá miếu thờ để tro... dabaochau đăng vào 21/1/26
• Đá Bảo Châu địa chỉ bán am thờ tro cốt... dabaochau đăng vào 19/1/26
• 83 Xây am thờ đá miếu để tro cốt tại Sóc... dabaochau đăng vào 15/1/26
• 66ĐT Mẫu am thờ để tro cốt gia đình bán... dabaochau đăng vào 11/1/26
• Tp. HCM. Thanh lý một số vỏ thùng Sơn nước. anhsinhvien đăng vào 27/12/25
• Đánh giá AMD Ryzen 5 5500GT: APU giá rẻ,... meo1725 đăng vào 26/12/25
• Thùng rác 660 lít dung tích lớn mua loại... nhtuyenbk đăng vào 19/12/25
• AMD giới thiệu vi xử lý EPYC Embedded 2005 meo1725 đăng vào 19/12/25
• Rổ đựng Xoài 50 x 39 x 30mm - Chất Lượng... nhtuyenbk đăng vào 16/12/25
• [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

Đang tải...

Chủ đề đáng chú ý

• Khóa học sketchup 3D chuyên plugin dựng... dohoasaigondm đăng vào 1/2/26 at 2:13 PM
• Chia sẻ bộ thư viện Revit đầu cột , phù... dohoasaigondm đăng vào 1/2/26 at 2:36 PM
• 70 Mẫu am để tro cốt đẹp bán tại Tây Ninh... dabaochau đăng vào 29/1/26
• [90] Mẫu am thờ để hũ tro cốt bán tại... dabaochau đăng vào 30/1/26 at 9:12 AM
• [ 86 Bình Thuận ] Xây am thờ để hũ tro... dabaochau đăng vào 3/2/26 at 9:27 AM

Đ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 >