Css-buttons-social
提供:Dev Guides
CSSボタン-ソーシャルボタンの使用
Social Buttonsライブラリは、純粋なCSSで作成されたCSSボタンのセットであり、BootstrapとFont Awesomeに基づいています。
ソーシャルボタンの読み込み
bootstrap-social.cssライブラリをロードするには、https://github.com/lipis/bootstrap-social [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>
それは次の出力を生成します-
[.fa .fa-twitter]##Login with 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>
それは次の出力を生成します-
- Login with Twitter# [.fa .fa-twitter]Login with Twitter [.fa .fa-twitter]</emphasis>Login with Twitter [.fa .fa-twitter]</emphasis>#Login with 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>
それは次の出力を生成します-
[.fa .fa-twitter]##