[CSS]シンプルながらバリエーションが豊富なソーシャルメディアのボタン

さまざまなデザインにマッチするようデザインされたシンプルなデザインのソーシャルメディアのボタンを紹介します。
実装も簡単で、外部ファイルとclassを付与するだけです。

サイトのキャプチャ

CSS Social Buttons

CSS Social Buttonsのデモ

まずは、ボタンのバリエーションをご紹介。

デモのキャプチャ

デモページ:デフォルトとサイズ

デモのキャプチャ

デモページ:スタイルは11種類

デモのキャプチャ

デモページ:スタイル+カラー

デモのキャプチャ

デモページ:カラーはデフォルトを含め15種類

デモのキャプチャ

デモページ:ミックス

デモのキャプチャ

デモページ:カスタム

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
アイコン
  • twitter
  • facebook
  • heart
  • linkedin
  • pinterest
  • podcast
  • rss
  • share_this
  • star
  • vimeo

カスタマイズ

アイコンはカスタマイズすることも可能で、画像をオリジナルにしたり、サイズ変更、カラー変更、グラデーションの変更、オリジナルのスタイルを作成するなどの方法もサイトに掲載されています。

利用にあたって

利用にあたっては、個人でも商用でもあらゆる目的で100%フリー、とのことです。

top of page

©2017 coliss