Ảnh minh họa.


Xin chào tất cả các bro :)), mình là Nguyễn Chánh Đức đây. Sau 1 thời gian bị em Duy Phương hối đăng bài mới nên hôm nay mình sẽ làm theo yêu cầu em đấy. Và mình xin chia sẻ cho các bạn cách làm nút share bằng css và html. Cái này nó chỉ phụ thuộc là vào Font Awesome thôi. Các bạn nhìn mình hướng dẫn và làm theo nhé!

Các bước tiến hành

Các bạn muốn làm được nút share này thì các bạn phải cài Font Awesome nhé! Các bạn chỉ cần thêm dòng CODE này trong thẻ head.
<link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
Bước tiếp theo các bạn tạo các biểu tượng mạng xã hội theo cấu trúc như sau: 


<div id="circle"> <i class="icon1 fa fa-share-alt fa-lg"></i> <i class="icon2 fa fa-share-alt fa-lg"></i> </div> <div id="sub"> <div id="circle"> <i class="icon1 fa fa-facebook fa-lg"></i> <i class="icon2 fa fa-plus fa-lg"></i> <span><a href="#">Facebook</a></span> </div> <div id="circle"> <i class="icon1 fa fa-twitter fa-lg"></i> <i class="icon2 fa fa-plus fa-lg"></i> <span><a href="#">Twitter</a></span> </div> <div id="circle"> <i class="icon1 fa fa-google-plus fa-lg"></i> <i class="icon2 fa fa-plus fa-lg"></i> <span><a href="#">Google +</a></span> </div> </div>
Bước cuối cùng là các bạn cho biểu tượng thêm 1 chút hiệu ứng, muốn cho hiệu ứng thì các bạn thêm CSS sau:

/* ///// MAIN CIRCLE ///// */ #circle { width: 80px; height: 80px; border-radius: 50%; background: #747392; position: absolute; z-index:2; top: 25px; left: 25px; box-shadow: 0 0 4px rgba(0, 0, 0, .11), 0 4px 8px rgba(0, 0, 0, .22); cursor: pointer; } #circle:after { content:''; width: 10px; height: 10px; position: absolute; border-radius: 50%; background: rgba(81, 80, 122, 0.6); left: 35px; top: 35px; } #circle i { font-size: 40px; color: #fff; position: absolute; top: 24px; left: 24px; z-index: 1; } #circle i.icon1 { opacity: 1; } #circle i.icon2 { opacity: 0; top: 25px; left: 22px; } /* ANIMATION */ #circle, #circle i, #circle:after { -webkit-transition: all .2s cubic-bezier(.4, 0, .2, 1); transition: all .2s cubic-bezier(.4, 0, .2, 1); } /* HOVER */ #circle:hover { background: #626186; box-shadow: 0 0 4px rgba(0, 0, 0, .15), 0 4px 8px rgba(0, 0, 0, .30); } #circle:hover:after { width: 80px; height: 80px; left: 0; top: 0; } #circle:hover > i { -webkit-transform: rotate(720deg); transform: rotate(720deg); } #circle:hover > i.icon1 { opacity: 0; } #circle:hover > i.icon2 { opacity: 1; } /* ///// SUB CIRCLES ///// */ #sub { width: 150px; height: 50%; z-index: 1; position: absolute; visibility:hidden; } #sub #circle { width: 50px; height: 50px; top: 0; left: 40px; opacity: 0; transition: 0.2s opacity; } #sub #circle:nth-child(1) { top: 120px; background: #95507f; } #sub #circle:nth-child(2) { top: 180px; background: #4e935c; } #sub #circle:nth-child(3) { top: 240px; background: #9f4b49; } #sub #circle:nth-child(1):after { background: rgba(126, 53, 108, 0.6); } #sub #circle:nth-child(2):after { background: rgba(49, 124, 61, 0.6); } #sub #circle:nth-child(3):after { background: rgba(135, 43, 45, 0.6); } #sub #circle:after { left: 20px; top: 20px; } #sub #circle i { font-size: 20px; top: 18px; left: 16px; } #sub #circle i.icon1 { opacity: 1; } #sub #circle i.icon2 { opacity: 0; } /* HOVER */ #sub #circle:hover:after { width: 50px; height: 50px; left: 0; top: 0; } #circle:hover + #sub #circle:nth-child(1) { opacity:1; transition-delay:0.05s; } #circle:hover + #sub #circle:nth-child(2) { opacity:1; transition-delay:0.1s; } #circle:hover + #sub #circle:nth-child(3) { opacity:1; transition-delay:0.15s; } #sub #circle:hover > i { -webkit-transform: rotate(90deg); transform: rotate(90deg); } #sub #circle:hover > i.icon1 { opacity: 0; } #sub #circle:hover > i.icon2 { opacity: 1; } #circle:hover + #sub { visibility:visible; } #sub:hover { visibility:visible; } #sub:hover > #circle { opacity:1; } /* ///// SUB TITLES ///// */ #circle span a{ display: block; margin-right: -150px; margin-top: 16px; color: rgba(0, 0, 0,0.7); font-family: 'Comfortaa', sans-serif; text-transform: uppercase; font-weight: 400; text-align: left; padding-left: 60px; font-size: 1.1em; letter-spacing: 0.25em; opacity: 0; -webkit-transition: all .4s cubic-bezier(.4, 0, .2, 2); transition: all .4s cubic-bezier(.4, 0, .2, 2); text-decoration-line: none; } /* HOVER */ #sub #circle:hover > span a{ opacity: 1; padding-left: 65px; } 

Kết bài

Bài viết tới đây là kết thúc rồi, mình xin chúc các bạn có 1 kì nghỉ hè và đi du lịch vui vẻ! Cảm ơn các bạn đã theo dõi, xin chào các bạn hẹn gặp lại các bạn trong các bài viết sau.
Liên hệ tại đây.

CHIA SẺ BÀI VIẾT

- - 33 bình luận
CHUYÊN MỤC
- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
• Email: nguyenchanhduc0908@gmail.com
• Facebook: facebook.com/ducidol0908

BÌNH LUẬN (33)

  1. Thiếu DEMO với lại " NHỘT " :))

    Trả lờiXóa
  2. này anh Đức sinh cùng năm mà sao phải gọi là anh em nhỉ
    My birthday : 26 - 4 - 2004

    Trả lờiXóa
  3. Blog chưa tick vào www và mở https kìa

    Trả lờiXóa
  4. em đổi liên kết www.hungstar.tk thành https://hungstar-it.blogspot.com anh với nha :D

    Trả lờiXóa
  5. hihi hello em, blog em cũng khá bắt mắt đó :)

    Trả lờiXóa
  6. Trả lời
    1. Đây nhé, ẩn cái phần chuyên mục trên footer trên đt đi.
      https://i.imgur.com/5Qv33SR.png

      Xóa
  7. bài viết hay, cám ơn đã chia sẻ nhé

    Trả lờiXóa
  8. Cố bổ sung demo cho dễ hiểu nha em

    Trả lờiXóa
  9. từ đây đến cuối tuần :v ra bài mới nhé :3

    Trả lờiXóa

Một số lưu ý khi bình luận

Vui lòng xem Hướng Dẩn Sử dụng trước khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Không được backlink và nói tục. Hãy là một độc giả có ý thức.

Nếu các bạn muốn liên hệ riêng với mình thì hãy click tại đây nhé.