Star Đức Blog: CÁCH LÀM NÚT SHARE VỚI HIỆU ỨNG VÒNG TRÒN BẰNG CSS.

Ả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.