CSSボタン-ソーシャルボタンの使用法

Social Buttonsライブラリは、純粋なCSSで作成されたCSSボタンのセットであり、BootstrapとFontAwesomeに基づいています。

ソーシャルボタンの読み込み

bootstrap-social.cssライブラリをロードするには、githubからbootstrap-social.cssをダウンロードし、Webページの<head>セクションに次の行を貼り付けます。

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

ボタンの使用

htmlアンカータグを使用してボタンを作成し、ソーシャル指定子btn-socialを使用してスタイルbtn、btn-blockを追加します。

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

次の出力が生成されます-

Twitterでログイン

サイズの定義

以下に示すように、CSSを使用してボタンのサイズを定義し、クラス名と一緒に使用することで、ボタンのサイズを拡大または縮小できます。与えられた例では、4つのサイズが変更されています。

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

次の出力が生成されます-

Twitterでログイン TwitterでログインTwitterでログインTwitterでログイン

アイコンのみを使用する

次の例は、アイコンのみのボタンを選択する方法を示しています。

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

次の出力が生成されます-