[CSS]シンプルながらバリエーションが豊富なソーシャルメディアのボタン
Post on:2012年3月9日
sponsors
さまざまなデザインにマッチするようデザインされたシンプルなデザインのソーシャルメディアのボタンを紹介します。
実装も簡単で、外部ファイルとclassを付与するだけです。
[ad#ad-2]
CSS Social Buttonsのデモ
まずは、ボタンのバリエーションをご紹介。
デモページ：デフォルトとサイズ
デモページ：スタイルは11種類
デモページ：スタイル+カラー
デモページ：カラーはデフォルトを含め15種類
[ad#ad-2]
デモページ：ミックス
デモページ：カスタム
CSS Social Buttonsの使い方
このソーシャルメディアのボタンはピュアCSS3でもHTML5 Canvasでもなく、背景画像を使って実装するものです。これらのアイコンはクロスブラウザで、さまざまなデザインに利用できるよう広い用途を目的としたものです。
外部ファイル
スタイルシートを外部ファイルとして記述し、画像フォルダをスタイルシートを同じ階層に設置します。
<link href="social-buttons.css" rel="stylesheet">
HTML
テキストをa要素で内包し、classにボタンのスタイルを定義します。
「sb」を共通で、あとはスタイルを組み合わせて記述します。
<a href="#" class="sb orange twitter">Twitter</a> <a href="#" class="sb blue facebook">Facebook</a>
class名
class名には、下記のものが用意されています。
- 共通
-
- sb
- サイズ
-
- default
- small
- large
- カラー
-
- blue
- purple
- red
- green
- orange
- brown
- black
- gray
- light-gray
- light-blue
- light-purple
- pink
- light-green
- yellow
- スタイル
-
- min
- flat
- circle
- embossed
- pressed
- thick-border
- no-border
- no-shadow
- gradient
- glossy
- text
- アイコン
-
- heart
- podcast
- rss
- share_this
- star
- vimeo
カスタマイズ
アイコンはカスタマイズすることも可能で、画像をオリジナルにしたり、サイズ変更、カラー変更、グラデーションの変更、オリジナルのスタイルを作成するなどの方法もサイトに掲載されています。
利用にあたって
利用にあたっては、個人でも商用でもあらゆる目的で100%フリー、とのことです。
sponsors
