SQLの窓

2015年12月24日


BUTTON 要素と CSS だけでアイコンボタンを表現する 『BUTTONS』

BUTTONS


実際は、A 要素もボタンになるのですが、ここではアイコンボタンのみ考えます。ダウンロードして実装するのもいいですが、基本 CSS は、CDNJS でホスティングされています。

アイコンに関しては、Font Awesome よりダウンロードできますが、これも //netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css を使うことができます ( ライセンスページ )

アイコンの種類と名前に関しては、こちらを参照して下さい

画像として簡単に手にいれたい場合は、こちら(フリーフォントで簡単ロゴ作成)でダウンロードできます( フォントのライセンスは SIL Open Font License 1.1 です )

  
  


サイズ : button-tiny



サイズ : button-small / 色 : button-primary



サイズ : 指定なし / 色 : button-action



サイズ : button-large / 色 : button-highlight



サイズ : button-jumbo / 色 : button-caution



サイズ : button-giant / 色 : button-royal



表現方法 : button-3d



表現方法 : button-raised



表現方法 : button-longshadow-right



表現方法 : button-glow



表現方法 : button-3d と button-border



表現方法 : button-glow と button-border


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Buttons/2.0.0/css/buttons.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css">

<button class="button button-square button-tiny"><span class="fa fa-glass"></span></button>
<button class="button button-box button-tiny"><i class="fa fa-music"></i></button>
<button class="button button-circle button-tiny"><i class="fa fa-search"></i></button>

<button class="button button-primary button-square button-small"><i class="fa fa-envelope-o"></i></button>
<button class="button button-primary button-box button-small"><i class="fa fa-heart"></i></button>
<button class="button button-primary button-circle button-small"><i class="fa fa-star"></i></button>

<button class="button button-action button-square"><i class="fa fa-star-o"></i></button>
<button class="button button-action button-box"><i class="fa fa-user"></i></button>
<button class="button button-action button-circle"><i class="fa fa-film"></i></button>

<button class="button button-highlight button-square button-large"><i class="fa fa-th-large"></i></button>
<button class="button button-highlight button-box button-large"><i class="fa fa-th"></i></button>
<button class="button button-highlight button-circle button-large"><i class="fa fa-th-list"></i></button>

<button class="button button-caution button-square button-jumbo"><i class="fa fa-check"></i></button>
<button class="button button-caution button-box button-jumbo"><i class="fa fa-remove"></i></button>
<button class="button button-caution button-circle button-jumbo"><i class="fa fa-search-plus"></i></button>

<button class="button button-royal button-square button-giant"><i class="fa fa-search-minus"></i></button>
<button class="button button-royal button-box button-giant"><i class="fa fa-power-off"></i></button>
<button class="button button-royal button-circle button-giant"><i class="fa fa-signal"></i></button>

<button class="button button-3d button-box button-giant"><i class="fa fa-gear"></i></button>
<button class="button button-3d button-primary button-circle button-giant"><i class="fa fa-trash-o"></i></button>

<button class="button button-raised button-action button-box button-giant"><i class="fa fa-home"></i></button>
<button class="button button-raised button-highlight button-circle button-giant"><i class="fa fa-file-o"></i></button>

<button class="button button-longshadow-right button-caution button-box button-giant"><i class="fa fa-clock-o"></i></button>
<button class="button button-longshadow-right button-royal button-circle button-giant"><i class="fa fa-road"></i></button>

<button class="button button-glow button-box button-giant"><i class="fa fa-download"></i></button>
<button class="button button-glow button-primary button-circle button-giant"><i class="fa fa-arrow-circle-o-down"></i></button>

<button class="button button-border button-3d button-box button-giant"><i class="fa fa-gear"></i></button>
<button class="button button-border button-3d button-primary button-circle button-giant"><i class="fa fa-trash-o"></i></button>

<button class="button button-border button-glow button-box button-giant"><i class="fa fa-arrow-circle-o-up"></i></button>
<button class="button button-border button-glow button-primary button-circle button-giant"><i class="fa fa-inbox"></i></button>


関連する記事

A 要素と CSS だけでボタンを表現する 『BUTTONS』



【HTML / CSSの最新記事】
posted by lightbox at 2015-12-24 15:21 | HTML / CSS | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり