Code

Share Code HTML + CSS Button Mạng Xã Hội Phổ Biến

0 18 11 minutes read

Khi phát triển website, việc tích hợp các trang mạng xã hội thông qua các nút (button) vào trang là điều vô cùng cần thiết trong SEO, không chỉ đơn thuần là thêm vào cho đẹp. Chúng là cầu nối quan trọng giúp bạn lan tỏa thông điệp, tăng tương tác và xây dựng cộng đồng vững mạnh.

Nếu bạn không phải là một lập trình viên chuyên nghiệp, hay chưa tìm được những mẫu code button mạng xã hội đẹp thì đừng lo lắng! Ở bài viết này, Shian sẽ “bật mí” cho bạn code HTML và CSS để tạo ra những nút mạng xã hội phổ biến nhất (Facebook, Instagram, Telegram,…), với giao diện đẹp mắt và hiệu ứng hover cực kỳ ấn tượng.

Nút Facebook

Facebook là mạng xã hội phổ biến nhất thế giới, với lượng người dùng khổng lồ. Tích hợp nút Facebook vào website sẽ giúp bạn:

Tăng lượt thích và theo dõi cho trang Facebook của bạn.
Khuyến khích người dùng chia sẻ nội dung của bạn lên Facebook, giúp mở rộng phạm vi tiếp cận.
Xây dựng cộng đồng và tăng tương tác với khách hàng.

Dưới đây là code HTML và CSS để tạo nút Facebook:

HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<button class="social-button facebook">
  <i class="fab fa-facebook-f"></i> Facebook
</button>

CSS:

/* Facebook Button */
.facebook {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #1877f2, #0052cc); /* Màu chính thức của Facebook */
  color: white;
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1), -8px -8px 15px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.facebook i {
  margin-right: 10px;
}

.facebook:hover {
  transform: translateY(-4px);
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), -8px -8px 20px rgba(255, 255, 255, 0.6);
}

.facebook:active {
  transform: translateY(2px);
  box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.1), inset -5px -5px 15px rgba(255, 255, 255, 0.5);
}

Demo:

Nút Instagram

Instagram là nền tảng chia sẻ ảnh và video phổ biến, thu hút đông đảo người dùng trẻ tuổi. Nút Instagram trên website giúp bạn:

Gia tăng lượt theo dõi trên Instagram.
Khoe những hình ảnh, video đẹp mắt về sản phẩm, dịch vụ của bạn.
Tiếp cận khách hàng tiềm năng thông qua hashtag và nội dung hấp dẫn.

HTML:

<button class="social-button instagram">
  <i class="fab fa-instagram"></i> Instagram
</button>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

CSS:

/* Instagram Button */
.instagram {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #fd1d1d, #fcb045); /* Màu chính thức của Instagram */
  color: white;
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1), -8px -8px 15px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.instagram i {
  margin-right: 10px;
}

.instagram:hover {
  transform: translateY(-4px);
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), -8px -8px 20px rgba(255, 255, 255, 0.6);
}

.instagram:active {
  transform: translateY(2px);
  box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.1), inset -5px -5px 15px rgba(255, 255, 255, 0.5);
}

Demo:

Nút Telegram

Telegram là ứng dụng nhắn tin tập trung vào tốc độ và bảo mật. Nút Telegram trên website có thể giúp bạn:

Hỗ trợ khách hàng nhanh chóng qua chat.
Xây dựng nhóm Telegram để chia sẻ thông tin, khuyến mãi,…
Tạo kênh Telegram để cập nhật tin tức, nội dung mới nhất.

HTML:

<button class="social-button telegram">
  <i class="fab fa-telegram-plane"></i> Telegram
</button>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

CSS:

/* Telegram Button */
.telegram {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #0088cc, #00c6ff); /* Màu chính thức của Telegram */
  color: white;
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1), -8px -8px 15px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.telegram i {
  margin-right: 10px;
}

.telegram:hover {
  transform: translateY(-4px);
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), -8px -8px 20px rgba(255, 255, 255, 0.6);
}

.telegram:active {
  transform: translateY(2px);
  box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.1), inset -5px -5px 15px rgba(255, 255, 255, 0.5);
}

Demo:

Nút TikTok

TikTok là nền tảng video ngắn đang rất hot hiện nay, phù hợp với những nội dung giải trí, sáng tạo. Nút TikTok trên website giúp bạn:

Thu hút người dùng đến với kênh TikTok của bạn.
Quảng bá thương hiệu, sản phẩm thông qua video ngắn.
Tăng độ nhận diện thương hiệu với giới trẻ.

HTML:

<button class="social-button tiktok">
  <i class="fab fa-tiktok"></i> TikTok
</button>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

CSS:

/* TikTok Button */
.tiktok {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #010101, #69c9d0); /* Màu chính thức của TikTok */
  color: white;
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1), -8px -8px 15px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.tiktok i {
  margin-right: 10px;
}

.tiktok:hover {
  transform: translateY(-4px);
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), -8px -8px 20px rgba(255, 255, 255, 0.6);
}

.tiktok:active {
  transform: translateY(2px);
  box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.1), inset -5px -5px 15px rgba(255, 255, 255, 0.5);
}

Demo:

Nút X (trước đây là Twitter)

Mạng xã hội X, trước đây là Twitter, là nơi để mọi người chia sẻ suy nghĩ, tin tức và tham gia vào các cuộc trò chuyện ngắn gọn. Nút X trên website sẽ giúp bạn:

Tăng lượng người theo dõi trên X.
Khuyến khích người dùng chia sẻ nội dung của bạn, tạo hiệu ứng lan truyền.
Tham gia vào các xu hướng và thảo luận nóng hổi trên X.

HTML:

<!-- Iconify CDN -->
<script src="https://code.iconify.design/2/2.1.0/iconify.min.js"></script>

<!-- Mạng X Button -->
<button class="social-button x">
  <span class="iconify" data-icon="logos:x" style="font-size: 24px; margin-right: 10px;"></span> X (Twitter)
</button>

CSS:

/* X Button (Mạng X) */
.x {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(145deg, #ffffff, #e5e5e5); 
  color: black; 
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1), -8px -8px 15px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.x .iconify {
  margin-right: 10px;
  color: black; 
}

.x:hover {
  transform: translateY(-4px);
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), -8px -8px 20px rgba(255, 255, 255, 0.6);
}

.x:active {
  transform: translateY(2px);
  box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.1), inset -5px -5px 15px rgba(255, 255, 255, 0.5);
}

Demo:

Nút GitHub

GitHub là nền tảng lưu trữ code và cộng tác phát triển phần mềm lớn nhất thế giới. Nút GitHub trên website thường được sử dụng bởi:

Các lập trình viên muốn chia sẻ dự án, code của mình.
Các công ty công nghệ muốn giới thiệu sản phẩm, dịch vụ liên quan đến lập trình.
Các cộng đồng mã nguồn mở muốn thu hút người đóng góp.

HTML:

<button class="social-button github">
  <i class="fab fa-github"></i> GitHub
</button>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

CSS:

/* GitHub Button */
.github {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #333333, #5a5a5a); /* Màu chính thức của GitHub */
  color: white;
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1), -8px -8px 15px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.github i {
  margin-right: 10px;
}

.github:hover {
  transform: translateY(-4px);
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), -8px -8px 20px rgba(255, 255, 255, 0.6);
}

.github:active {
  transform: translateY(2px);
  box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.1), inset -5px -5px 15px rgba(255, 255, 255, 0.5);
}

Demo:

Nút LinkedIn

LinkedIn là mạng xã hội dành cho các chuyên gia và doanh nghiệp. Nút LinkedIn trên website giúp bạn:

Kết nối với các đối tác, khách hàng tiềm năng trong lĩnh vực của bạn.
Chia sẻ thông tin về công ty, sản phẩm, dịch vụ đến cộng đồng chuyên nghiệp.
Tuyển dụng nhân tài.

HTML:

<button class="social-button linkedin">
  <i class="fab fa-linkedin-in"></i> LinkedIn
</button>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

CSS:

/* LinkedIn Button */
.linkedin {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #0077b5, #00a0dc); /* Màu chính thức của LinkedIn */
  color: white;
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1), -8px -8px 15px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.linkedin i {
  margin-right: 10px;
}

.linkedin:hover {
  transform: translateY(-4px);
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), -8px -8px 20px rgba(255, 255, 255, 0.6);
}

.linkedin:active {
  transform: translateY(2px);
  box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.1), inset -5px -5px 15px rgba(255, 255, 255, 0.5);
}

Demo:

Nút Messenger

Messenger là ứng dụng nhắn tin của Facebook, cho phép bạn trò chuyện trực tiếp với bạn bè và khách hàng. Nút Messenger trên website giúp bạn:

Hỗ trợ khách hàng nhanh chóng, thuận tiện.
Tăng tương tác với khách hàng.
Giải đáp thắc mắc, tư vấn sản phẩm.

HTML:

<button class="social-button messenger">
  <i class="fab fa-facebook-messenger"></i> Messenger
</button>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

CSS:

/* Messenger Button */
.messenger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #0084ff, #00b2ff); /* Màu chính thức của Messenger */
  color: white;
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1), -8px -8px 15px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.messenger i {
  margin-right: 10px;
}

.messenger:hover {
  transform: translateY(-4px);
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), -8px -8px 20px rgba(255, 255, 255, 0.6);
}

.messenger:active {
  transform: translateY(2px);
  box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.1), inset -5px -5px 15px rgba(255, 255, 255, 0.5);
}

Demo:

Nút Pinterest

Pinterest là nền tảng chia sẻ hình ảnh theo chủ đề, lý tưởng để quảng bá sản phẩm, dịch vụ liên quan đến thời trang, ẩm thực, trang trí nội thất,… Nút Pinterest trên website giúp bạn:

Thu hút traffic đến trang Pinterest của bạn.
Tăng lượt lưu (Pin) và chia sẻ hình ảnh sản phẩm.
Tiếp cận khách hàng tiềm năng quan tâm đến lĩnh vực của bạn.

HTML:

<button class="social-button pinterest">
  <i class="fab fa-pinterest"></i> Pinterest
</button>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

CSS:

/* Pinterest Button */
.pinterest {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #bd081c, #e60023); /* Màu chính thức của Pinterest */
  color: white;
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1), -8px -8px 15px rgba(255, 255, 255, 0.5);
  transition

Demo:

Lời Kết

Vậy là chúng ta đã cùng nhau khám phá cách tạo những nút mạng xã hội đẹp mắt và chuyên nghiệp bằng HTML và CSS. Hy vọng bài viết này đã cung cấp cho bạn những kiến thức bổ ích và code mẫu để áp dụng vào website của mình.

Đừng quên lựa chọn những nút mạng xã hội phù hợp với đối tượng khách hàng và mục tiêu của bạn. Hãy thỏa sức sáng tạo và tùy chỉnh để tạo ra những nút ấn tượng, phản ánh phong cách riêng của website nhé!

Hãy chia sẻ bài viết này nếu bạn thấy hữu ích và để lại bình luận bên dưới nếu có bất kỳ câu hỏi nào. Chúc bạn thành công!

Chia Sẻ Code Phát Hiện Chặn Quảng Cáo (Adblock) Cho Blogger/WordPress

“Hack” Sub Kênh YouTube Mà Không Tốn Một Xu Với Đoạn Code Subscribe To Unlock Này

Chia Sẻ Code Nút Download Có Đếm Ngược Cho Blogger/WordPress