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: 13,903

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

   • Học jquery từ cơ bản đến nâng cao p4 Attributes jquery26/02/2015
   • Khách hàng tự design sản phẩm21/06/2017
   • Hướng dẫn sử dụng lazy load của jquery11/02/2015
   • Cách sử dụng thư viện masonry của Javascript11/02/2015
   • Nhà Thịnh Liệt oto vào tận nhà 110m2 x 4 tầng. LH 0338052399.15/06/2020
   • Nhờ Mọi Người Giúp Đỡ Code Chức Năng Trong PHP13/06/2014
   • Windows Mobile Web Form với Visual Studio 200810/12/2012
   • [Web design] Tìm hiểu về thuộc tính z-index trong CSS20/03/2013
   • Cần sự giúp đỡ về search engine09/03/2018
   • Cho mình hỏi chút về CODE đếm lùi trong JavaScript27/09/2016
   • 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
   • Bản đồ tương tác - Interactive map: Thắc mắc về chức năng trên javascript/ jQuery07/11/2017
   • Hướng dẫn jquery tránh xung đột với thư viện khác24/02/2015
   • Học HTML - Định dạng tập tin HTML với Style23/10/2015
   • Pro nào chỉ mình insert php/js02/04/2016
   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

• Cơ sở sản xuất hột quẹt, bật lửa giá rẻ s510 tamtukd29 đăng vào 22/11/24 at 10:07 AM
• Chuyên gia Zowin giải đáp: Tài xỉu online... k87mvan đăng vào 21/11/24 at 4:38 PM
• Những Lưu Ý Khi Chơi Game Đánh Bài Ăn... k87mvan đăng vào 18/11/24 at 6:26 PM
• Long đình bằng đá trong khu lăng mộ đẹp... phamthuannb đăng vào 13/11/24
• Kinh Nghiệm Đánh Bao Lô Bất Bại Tại Saowin k87mvan đăng vào 8/11/24
• Sảnh Cược Thể Thao Nhatvip: Điểm Đến Của... k87mvan đăng vào 1/11/24
• Game Bài Đổi Thưởng Zowin: Nơi Giải Trí... k87mvan đăng vào 31/10/24
• Intel và AMD thành lập Nhóm Cố vấn Hệ... meo1725 đăng vào 31/10/24
• 51 mẫu bàn thờ thiên ở Nam Bộ thiết kế... phamthuannb đăng vào 29/10/24
• Script vẽ khuôn túi giấy tự động cho... DinhMinh Design đăng vào 27/10/24
• Tổng hợp font Halloween Việt hóa TruongHao đăng vào 25/10/24
• Phương Pháp Bất Bại Chơi Keno Đại Phát... k87mvan đăng vào 24/10/24
• AMD chính thức ra mắt CPU EPYC thế hệ 5:... meo1725 đăng vào 23/10/24
• Hướng dẫn cách chơi Thần Quay Nổ Hũ tại... k87mvan đăng vào 23/10/24
• Chia sẻ cách nuôi dàn đề 20 số tại 789Club k87mvan đăng vào 23/10/24
• Tài Xỉu Livestream là gì? Hướng dẫn cách... k87mvan đăng vào 19/10/24
• Chia Sẻ Luật Chơi Baccarat Dễ Hiểu Tại Zowin k87mvan đăng vào 19/10/24

Đang tải...

Chủ đề đáng chú ý

• Những Lưu Ý Khi Chơi Game Đánh Bài Ăn... k87mvan đăng vào 18/11/24 at 6:26 PM
• Chuyên gia Zowin giải đáp: Tài xỉu online... k87mvan đăng vào 21/11/24 at 4:38 PM
• Cơ sở sản xuất hột quẹt, bật lửa giá rẻ s510 tamtukd29 đăng vào 22/11/24 at 10:07 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 >