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

Triển thôi…

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

Create Amazing Social Share Button

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

<p>
* Require import FontAwesome to stylesheet
</p>

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 FontAwesome