CSS Düğmeleri - Sosyal Düğmeler Kullanımı

Social Buttons kitaplığı, saf CSS'de yapılmış bir dizi CSS Düğmesidir ve Bootstrap ve Font Awesome'i temel alır.

Sosyal Düğmeleri Yükleme

Önyükleme-social.css kitaplığını yüklemek için, gelen önyükleme-social.css indirmek github ve <head> aşağıdaki satırı web sayfasının bölümüne yapıştırın.

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

Düğmenin Kullanılması

Html bağlantı etiketini kullanarak bir düğme oluşturun ve btn-social sosyal tanımlayıcısı ile btn, btn-block stilleri ekleyin.

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

Aşağıdaki çıktıyı üretecektir -

Twitter ile giriş yap

Boyutu Tanımlama

Aşağıda gösterildiği gibi CSS kullanarak boyutunu tanımlayarak ve sınıf adıyla birlikte kullanarak bir düğmenin boyutunu artırabilir veya azaltabilirsiniz. Verilen örnekte, dört boyutu değiştirdik.

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

Aşağıdaki çıktıyı üretecektir -

Twitter ile Giriş Twitter ile Giriş Twitter ile Giriş Twitter ile Giriş

Yalnızca Simgeleri kullanma

Aşağıdaki örnek, yalnızca simge düğmelerinin nasıl seçileceğini gösterir.

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

Aşağıdaki çıktıyı üretecektir -