Hiệu ứng icon đẹp mắt với CSS3: Circle social share

Xin chào các bạn. Ngày hôm nay chúng ta lại gặp nhau trên Viblo và mình xin chia sẻ với các bạn một Tip rất hay về CSS3. Hẳn là với thời buổi phát triển mạnh của các mạng xã hội như hiện này, người người dùng mạng xã hội thì đi đâu lang thang vào website nào bây giờ đa phần chúng ta đều bắt gặp các icon Social nào là Facebook, Intagram, Twitter, G+, ... với mục đích là cho người dùng share, chia sẻ các bài viết đó, chia sẻ ảnh hay chia sẻ trang web đó lên các mạng xã hội để kéo Traffic về các website này, đồng thời sẽ tạo ra một hệ thống các backlink chất lượng đến từ các mạng xã hội uy tín do chính người dùng đi reo backlinks. Vậy là mục đích của các nhà phát triển web là quá rõ ràng rồi, vậy nếu chúng ta làm một website cho riêng mình thì đương nhiên chúng ta cũng sẽ ko thể ko cho các nút share này vào rồi đúng không nào? Nhưng làm thế nào để người dùng có thể share, thfi bên cạnh yếu tố bài viết, content hay chất lượng, hữu ích ra thì bố cục web phải đẹp, các nút bấm icon cũng phải bắt mắt sẽ góp một phần ko nhỏ vào trải nghiệm của người dùng đó. Trong bài viết này mình xin giới thiệu đến các bạn cách làm một bộ nút icon share thật đẹp lung linh luôn. Và công việc đầu tiên là chúng ta sẽ tạo ra các file index.html và style.css nhé. Các icon logo của các mạng xã hội này chúng ta sẽ không dùng ảnh mà dùng bộ icon của awesome nhé cả nhà, cho nó nhẹ, chúng ta sẽ download file font-awesome.min.css về từ trang chủ "http://fontawesome.io/" sau đó chúng ta sẽ sử dụng thẻ link để nhúng vào file html:

<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" >

Nếu ngại không muốn dowm về, chúng ta có thể dùng online luôn như sau:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" >

ok rồi, tiếp đến chúng ta sẽ sử dụng các class có sẵn ở font awesome trên để tạo ra các logo giống y như các logo mạng xã hội nhé:

<div class="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 class="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 class="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 class="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>

Sau khi code xong html, chúng ta sẽ sử dụng code CSS để làm các icon này cho màu mè đẹp mắt nhé các bạn, chúng ta cùng mở file style.css lên và code CSS nào:

/* ///// 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;
}

/* ///// 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;
}

Vậy là ta mới xong phần CSS cho nó, nhưng nó mới ra đc cái icon này thôi nhé, thực chất là các icon mạng xã hội khác bị ẩn phía sau icon to kia rồi, chúng ta phải code thêm để khi hover vào icon cha này, các icon social từ từ hiện ra một cách nhẹ nhàng nhé! Tiếp tục chúng ta làm thêm hiệu ứng Animation cho file CSS nhé, đầu tiên ý đồ của mình là khi hover vào icon cha này, nó sẽ xoay xoay rồi nó mở xổ ra các icon social, thế nó mới truất chứ, để cho hiệu ứng icon cha xoay khi hover vào ta code như sau:

/* 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;
}

Rồi đó, các bạn thử hover vào icon cha này và cảm nhận nhé. Tiếp theo phần quan trọng nhất đó chính là sự xuất hiện của các icon mạng xã hội phải không nào:

/* 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;
}

Icon social, tất cả đã xổ từ trên xuống ra khi mình hover vào icon cha rồi đó nhưng các chữ đi kèm icon vẫn chưa đc style nên nhìn vẫn lệch và xấu. Mình sẽ style nốt chữ đi kèm các icons nữa là ok Để style cho các chữ đi kèm kia, chúng ta viết thêm đoạn code sau:

/* ///// 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;
}

Vậy là bây giờ khi bạn hover vào từng icon mạng xã hội, sẽ có hiệu ứng và text đi kèm từ từ hiện ra rồi nhé, không tin hãy cùng thử đi nào. Chúc các bạn thành công