Tạo nút chia sẽ lên mạng xã hội với hiệu ứng đẹp chỉ dùng HTML và CSS

Trên mạng đã có rất nhiều trang chia sẽ làm sao để tạo ra các button chia sẽ đẹp sử dụng CSS và HTML rồi nhưng hôm nay rãnh rồi mình code được mấy cái "nút" chia sẽ cùng biểu tượng khá đẹp giành cho các bạn chèn vào Blog hoặc web cá nhân của mình tạo nên vẽ thẩm mỹ thống nhất với hiệu ứng khá thú vị.

Code này chỉ là phần thô để hiện thị thôi, nếu bạn muốn thực hiện các hành động chia sẽ thực sự hãy thêm link vào code hoặc sử dụng Javascript để hỗ trợ thêm nhé.

 

DEMO

Triển thôi...

 

Đầu tiên ta có nội dung HTML như sau

<div class="btn-share btn-facebook">
   <a href="#"></a>
</div>
<div class="btn-share btn-twitter">
   <a href="#"></a>
</div>
<div class="btn-share btn-pinterest">
   <a href="#"></a>
</div>
<div class="btn-share btn-snapchat">
   <a href="#"></a>
</div>
<div class="btn-share btn-linkedin">
   <a href="#"></a>
</div>

Class chung là .btn-share có nội dung sau

.btn-share {
  font-family: "FontAwesome";
  display: inline-block;
}

Tiếp đến là thẻ a để tạo thành button hình tròn

.btn-share a {
  width: 70px;
  height: 70px;
  display: inline-block;
  overflow: hidden;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 40px;
  border-radius: 50%;
}

Định vị các biểu tượng trong thẻ a và hiệu ứng trỏ chuột như sau:

.btn-share a::before {
  display: block;
  margin: 15px 0;
  transition: all 0.3s;
}

.btn-share a::after {
  display: block;
  transition: all 0.3s;
}

.btn-share a:hover:before {
  margin-top: -40px;
}

Cuối cùng là các button và màu nền

/* Button Facebook */

.btn-facebook a {
  background: #3b5998;
}

.btn-facebook a:before,.btn-facebook a:after {
  content: "\f082";
}

/* Button Twitter */

.btn-twitter a {
  background: #38A1F3;
}

.btn-twitter a:before, .btn-twitter a:after {
  content: "\f099";
}

/* Button Pinterest */

.btn-pinterest a {
  background: #BD081C;
}

.btn-pinterest a:before, .btn-pinterest a:after {
  content: "\f0d3";
}

/* Button Snapchat */

.btn-snapchat a {
  background: #FFFC00;
}

.btn-snapchat a:before, .btn-snapchat a:after {
  content: "\f2ab";
}

/* Button Linkedin */

.btn-linkedin a {
  background: #0084FF;
}

.btn-linkedin a:before, .btn-linkedin a:after {
  content: "\f08c";
}

 

CSS hoàn chỉnh ta có như sau:

.btn-share {
  font-family: "FontAwesome";
  display: inline-block;
}

.btn-share a {
  width: 70px;
  height: 70px;
  display: inline-block;
  overflow: hidden;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 40px;
  border-radius: 50%;
}

.btn-share a::before {
  display: block;
  margin: 15px 0;
  transition: all 0.3s;
}

.btn-share a::after {
  display: block;
  transition: all 0.3s;
}

.btn-share a:hover:before {
  margin-top: -40px;
}

/* Button Facebook */

.btn-facebook a {
  background: #3b5998;
}

.btn-facebook a:before,.btn-facebook a:after {
  content: "\f082";
}

/* Button Twitter */

.btn-twitter a {
  background: #38A1F3;
}

.btn-twitter a:before, .btn-twitter a:after {
  content: "\f099";
}

/* Button Pinterest */

.btn-pinterest a {
  background: #BD081C;
}

.btn-pinterest a:before, .btn-pinterest a:after {
  content: "\f0d3";
}

/* Button Snapchat */

.btn-snapchat a {
  background: #FFFC00;
}

.btn-snapchat a:before, .btn-snapchat a:after {
  content: "\f2ab";
}

/* Button Linkedin */

.btn-linkedin a {
  background: #0084FF;
}

.btn-linkedin a:before, .btn-linkedin a:after {
  content: "\f08c";
}

 

LƯU Ý: Bạn cần phải thêm CSS Font Awesome vào để các biểu tượng hiển thị chính xác, để thêm các bạn tham khảo tại đây