Các nút CSS - Sử dụng các nút mạng xã hội

Thư viện Social Buttons là một tập hợp các CSS Buttons được tạo bằng CSS thuần túy và dựa trên Bootstrap và Font Awesome.

Đang tải các nút xã hội

Để tải thư viện bootstrap-social.css, hãy tải xuống bootstrap-social.css từ github và dán dòng sau vào phần <head> của trang web.

<head>
   <link rel = "stylesheet" href = "bootstrap-social.css">
</head>

Sử dụng nút

Tạo một nút bằng cách sử dụng thẻ liên kết html và thêm các kiểu btn, btn-block với công cụ xác định xã hội btn-social.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Đăng nhập bằng Twitter

Xác định kích thước

Bạn có thể tăng hoặc giảm kích thước của một nút bằng cách xác định kích thước của nó bằng CSS và sử dụng nó cùng với tên lớp, như được hiển thị bên dưới. Trong ví dụ đã cho, chúng tôi có bốn kích thước thay đổi.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-lg btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-md btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-sm btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-xs btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Đăng nhập bằng Twitter Đăng nhập bằng Twitter Đăng nhập bằng Twitter Đăng nhập bằng Twitter

Chỉ sử dụng các Biểu tượng

Ví dụ sau đây cho thấy cách chọn các nút chỉ biểu tượng.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-social-icon btn-twitter">
         <span class = "fa fa-twitter"></span>
      </a>   
   </body> 
</html>

Nó sẽ tạo ra kết quả sau: