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

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 HTML - Các thành phần chính bên trong thẻ meta08/09/2015
   • [HANOI] tìm người chỉnh sửa html css json nhanh trong ngày23/02/2017
   • Tạo TextBox giống Google08/12/2012
   • Hỏi về đóng content khi click vào buton06/09/2019
   • Có ai biết về html vào giúp em được không ak29/10/2016
   • Editor FreeTextBox trong ASP.NET08/12/2012
   • Không hiển thị được menu con trong css bootstrap khi có thanh cuộn(scroll)01/12/2017
   • [Html & Css] Hover Effect Ideas14/08/2014
   • Share code SimSimi Comment14/06/2016
   • ĐỊADOWNLOAD 6,000+ WEBSITE TEPLATES FREE08/08/2019
   • Lỗi khi Upload File20/06/2017
   • Thuộc tính background trong css và kinh nghiêm khi sử dụng nó18/06/2016
   • Nhờ Mọi Người Giúp Đỡ Code Chức Năng Trong PHP13/06/2014
   • Share code javascript hoa mai đào rơi trên website nhân dịp Tết27/01/2016
   • Thuộc tính Content trong CSS02/08/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

• Trà Hoa Cúc Chi Tiến Vua Sấy Lạnh Nguyên Chất niemtin259 đăng vào 20/12/24 at 9:50 PM
• Hướng dẫn cách tính lô theo ngũ hành tại... k87mvan đăng vào 17/12/24 at 3:29 PM
• 15 mẫu khu lăng mộ đá đẹp và ưu điểm nổi... dabaochau đăng vào 14/12/24
• Hướng dẫn cách chơi game xếp bài... k87mvan đăng vào 13/12/24
• Thông tin chi tiết về mộ đá tam cấp chuẩn... dabaochau đăng vào 9/12/24
• Những lưu ý khi chơi kèo ném biên tại Saowin k87mvan đăng vào 7/12/24
• Học cách đánh lô theo đầu câm từ chuyên... k87mvan đăng vào 4/12/24
• Học thiết kế Đồ Họa 3d kiến trúc Nội Thất... dohoasaigondm đăng vào 2/12/24
• Kèo 1/2 lựa là sao? Tìm hiểu chi tiết tại... k87mvan đăng vào 26/11/24
• Cơ sở sản xuất hột quẹt, bật lửa giá rẻ s510 tamtukd29 đăng vào 22/11/24
• Chuyên gia Zowin giải đáp: Tài xỉu online... k87mvan đăng vào 21/11/24
• Những Lưu Ý Khi Chơi Game Đánh Bài Ăn... k87mvan đăng vào 18/11/24
• 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

Đang tải...

Chủ đề đáng chú ý

• 15 mẫu khu lăng mộ đá đẹp và ưu điểm nổi... dabaochau đăng vào 14/12/24
• Hướng dẫn cách tính lô theo ngũ hành tại... k87mvan đăng vào 17/12/24 at 3:29 PM
• Trà Hoa Cúc Chi Tiến Vua Sấy Lạnh Nguyên Chất niemtin259 đăng vào 20/12/24 at 9:50 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 >