CSS-Schaltflächen - Verwendung sozialer Schaltflächen

Die Social Buttons-Bibliothek besteht aus einer Reihe von CSS-Schaltflächen, die in reinem CSS erstellt wurden und auf Bootstrap und Font Awesome basieren.

Laden der sozialen Schaltflächen

Laden Sie zum Laden der Bibliothek bootstrap-social.css die Datei bootstrap-social.css von github herunter und fügen Sie die folgende Zeile in den Abschnitt <head> der Webseite ein.

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

Verwenden der Taste

Erstellen Sie eine Schaltfläche mit dem HTML-Ankertag und fügen Sie die Stile btn, btn-block mit dem Social Specifier btn-social hinzu.

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

Es wird die folgende Ausgabe erzeugt -

Loggen Sie sich mit Twitter ein

Größe definieren

Sie können die Größe einer Schaltfläche erhöhen oder verringern, indem Sie ihre Größe mithilfe von CSS definieren und zusammen mit dem Klassennamen verwenden, wie unten gezeigt. Im angegebenen Beispiel haben wir vier Größen geändert.

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

Es wird die folgende Ausgabe erzeugt -

Mit Twitter anmelden Mit Twitter anmelden Mit Twitter anmelden Mit Twitter anmelden

Nur die Symbole verwenden

Das folgende Beispiel zeigt, wie Sie Schaltflächen nur für Symbole auswählen.

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

Es wird die folgende Ausgabe erzeugt -