Tổng hợp hiệu ứng đẹp cho nút chia sẻ mạng xã hội bằng CSS3

Việc tích hợp những nút chia sẻ bài viết thông qua mạng xã hội là một trong những điều cần phải có cho một website. Có rất nhiều bài viết cũng như thủ thuật giúp các bạn làm điều này, và hôm nay mình xin chia sẻ cho các bạn một cách nữa. Với nút chia sẻ này, các bạn sẽ có rất nhiều hiệu ứng cực kỳ mềm mại và chuyên nghiệp, đặc biệt hơn nữa là chúng ta sẽ không cần phải chèn thêm bất kì một đoạn script nào. Tất cả chỉ bằng CSS3.

Xem Demo | Download

Vì có rất nhiều hiệu ứng, nên mình sẽ chỉ thực hiện từng bước cho 1 hiệu ứng , và từ hiệu ứng này, các bạn có thể tự điều chỉnh thêm nhiều hiệu ứng khác.

HTML

Đầu tiên , chúng ta sẽ cần định dạng html cơ bản như sau :

<div class="cell ">
	<div class="share-wrapper left">
		<div class="share-action icon-share"></div>
			<div class="share-container">
				<a class="share-btn tl icon-google-plus" href='#'></a>
				<a class="share-btn tr icon-twitter" href='#'></a>
				<a class="share-btn br icon-facebook" href='#'></a>
		        <a class="share-btn bl icon-pinterest" href='#'></a>
		  </div>
		</div>
</div>

CSS

Chúng ta sẽ tạo các icon từ font với sự hỗ trợ của FontAwesome, nên đầu tiên, các bạn tạo icon như sau :

@font-face{
    font-family:FontAwesome;
    src:url(http://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.eot?#iefix) format('eot'),
    url(http://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.woff) format('woff'),
    url(http://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.ttf) format('truetype'),
    url(http://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.svg#FontAwesome) format('svg');
    font-weight:400;font-style:normal;}

/*  Font Awesome styles
    ------------------------------------------------------- */
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}
a [class^="icon-"], a [class*=" icon-"] {
  display: inline-block;
  text-decoration: inherit;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
  vertical-align: top;
  font-size: 1.3333333333333333em;
}
.btn [class^="icon-"], .btn [class*=" icon-"] {
  /* keeps button heights with and without icons the same */

  line-height: .9em;
}
li [class^="icon-"], li [class*=" icon-"] {
  display: inline-block;
  awidth: 1.25em;
  text-align: center;
}
li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"] {
  /* 1.5 increased font size for icon-large * 1.25 awidth */

  awidth: 1.875em;
}
li[class^="icon-"], li[class*=" icon-"] {
  margin-left: 0;
  list-style-type: none;
}
li[class^="icon-"]:before, li[class*=" icon-"]:before {
  text-indent: -2em;
  text-align: center;
}
li[class^="icon-"].icon-large:before, li[class*=" icon-"].icon-large:before {
  text-indent: -1.3333333333333333em;
}
/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
.icon-facebook:before             { content: "f09a"; }
.icon-twitter:before              { content: "f099"; }
.icon-pinterest:before            { content: "f0d2"; }
.icon-google-plus:before          { content: "f0d5"; }

.icon-share:before                { content: "f045"; }

Lúc này chúng ta sẽ có các icon như sau :

Kế tiếp, chúng ta sẽ định dạng cho khung chứa các icon và cho nút share

.cell {
  float: left;
  awidth: 200px;
  height: 200px;
  position: relative;
}

.share-wrapper,
.share-action {
  awidth: 32px;
  height: 32px;
}

.share-wrapper {
  font: 14px, 'FontAwesome';
  position: relative;
  text-align: center;
}

/* dinh dang cho nut share */
.share-action {
  display: inline-block;
  vertical-align: middle;
  z-index: 5;
  position: relative;
  background: linear-gradient(#8df 0%, #29d 100%);
  box-shadow: 0 1px 5px rgba(255, 255, 255, 0.5) inset, 0 0 0px 1px rgba(33, 112, 178, 0.5);
  line-height: 33px;
  color: #fff;
}

Sau đó ẩn các icon đi :

.share-container {
  margin-left: 0px;
  margin-top:  0px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(.05,.93,.61,1.6);
  box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.5);
  awidth: 0px;
  height: 0px;
  background: #fff;
  position: absolute;
  top: 0%;
  right: 50%;
}

Và các icon sẽ được hiển thị khi chúng ta rê chuột (hover) vào nút share

.share-action:hover ~ .share-container,
.share-container:hover {
  awidth: 100px;
  height: 100px;

  overflow: visible;
}

Tuy nhiên, hiệu ứng vẫn chưa đẹp và các icon sắp xếp vẫn còn lộn xộn, các bạn thêm dòng code sau :

/* hiện khung chứa các icon, nhưng icon sẽ dc ẩn đi với giá trị font-size: 0px; */
.share-btn {
  display:inline-block;
  awidth: 49%;
  height: 49%;
  position: absolute;
  z-indez:1;
  border-color: #92888f;
  border-style: solid;
  border-awidth: 0;
  font-size: 0px;
  color: #777777;
  overflow: hidden;
}

/* Đưa sang trái */
.left.share-wrapper {
  margin: 50% 0 0 65%;
  top: -16px;
}

/* hien cac icon khi re chuot vao nut share*/
.share-action:hover ~ .share-container .share-btn ,
.share-container:hover .share-btn  {
  overflow: visible;
  font-size: 25px;
}

/*phan bo vi tri cho tung icon*/
.share-btn:hover {
  background:linear-gradient(#8df 0%, #29d 100%);
  color: #ffffff;
  text-shadow: 0 -1px #4298e0;
}

.share-btn.tl {
  right: 50%;
  bottom: 50%;

}
.share-btn.tr {
  left: 50%;
  bottom: 50%;

}
.share-btn.br {
  left: 50%;
  top: 50%;

}
.share-btn.bl {
  right: 50%;
  top: 50%;

}

.share-btn {
  line-height: 50px;
}

Tạo thêm dấu mũi tên :

.left .share-action:hover ~ .share-container .share-btn:nth-child(2):after,
.left .share-container:hover .share-btn:nth-child(2):after {
  content: ';
  border: 11px solid transparent;
  border-left-color: #fff;
  border-right: none;
  awidth: 0;
  height: 0;
  position: absolute;
  left: 100%;
  top: 100%;
  margin-top: -11px;
}

Việc cuối cùng là đưa tất cả về bên trái là xong :

.left .share-action:hover ~ .share-container,
.left .share-container:hover {
  margin-right: 20px;
  right: 100%;
  top: -100%;
}

.left .share-action:hover:after {
  position: absolute;
  content: ';
  z-index: 1;
  left: auto;
  awidth: 20px;
  height: 200%;
  top: -50%;
  right: 100%;
}

Bây giờ các bạn chỉ việc thay đổi các thông số là có thể chuyển hiệu ứng xuất hiện từ trái sang phải, hoặc bo góc … Mình có tổng hợp lại tất cả ở phần demo, các bạn có thể xem trực tiếp hoặc download về máy để xem chi tiết hơn nhé.

Chuyên Mục: Css

Bài viết được đăng bởi webmaster