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

※ 現在 CDNJS でホスティングされています。

❶ https://cdnjs.cloudflare.com/ajax/libs/Buttons/2.0.0/css/buttons.min.css
( link 要素で参照するだけです )

※ ここでは SPAN 要素に対して設定しているのでリンクではありません( 強調として )
※ こんな感じです class="button button-primary"

BUTTON 要素と CSS だけでアイコンボタンを表現する 『BUTTONS』 では、アイコン用にフリーフォント用の CSS が必要でしたが、A 要素のみで使用する場は必要ありません。テキストとして使用できるものは全て利用可能です

❷ 基本は、class 属性の値として button を指定します
 ( ありがちな値なので競合に注意して下さい )

❸ 次にサイズ用の値
 ( button-tiny / button-small / button-large / button-jumbo / button-giant )
※ 省略すると標準の大きさ

❹ 次に色
 ( button-primary / button-action / button-highlight / button-caution / button-royal )
※ 省略すると灰色
button-inverse で黒を指定できます

になります。ここまででも通常状態で作成されますが、さらに形状を指定できます

❺ button-rounded / button-pill / button-3d / button-raised / button-longshadow-right / button-glow

button-rounded で角丸

button-pill で錠剤形状

button-3d で立体形状

button-longshadow-right で文字の影
( 色によっては、影が出なかったり見えにくかったりします )
button-longshadow-left( 左向きの影 )もあります

button-glow で全体が点滅

▼ class="button button-3d button-border"
さらに、button-border と組み合わせて白抜きの表現が可能になっています

button button-glow button-border

▼ 以下の二つの組み合わせは使えませんね
button button-raised button-border
( button button-raised button-border )

button button-longshadow-right button-border
( button button-longshadow-right button-border )

基本形状の組み合わせも可能です

サイズ : button-tiny

Go Go Go

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

Go Go Go

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

Go Go Go

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

Go Go Go

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

Go Go Go

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

Go Go Go

表現方法 : button-3d

日本語でもOKですが

button クラスの font-family を

上書きしないと

想定したフォントになりません

表現方法 : button-raised

ようこそ! Go こんにちは!

黒は button-inverse

表現方法 : button-longshadow-right

普通の文字でも 影は 使えます
♞

表現方法 : button-glow

Go Go Go Go

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

OK

br 要素で改行する場合は
heightとline-height指定が必要です

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

OK

br 要素で改行する場合は
heightとline-height指定が必要です

<style>
.button {
	font-family: "Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande", "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif!important;
}
</style>

<link id="link" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Buttons/2.0.0/css/buttons.min.css">

<div id="buttons_a">
<br><br><b class="gttl">サイズ : button-tiny</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-tiny">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-rounded button-tiny">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-pill button-tiny">Go</a>

<br><br><b class="gttl">サイズ : button-small / 色 : button-primary</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-primary button-small">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-primary button-rounded button-small">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-primary button-pill button-small">Go</a>

<br><br><b class="gttl">サイズ : 指定なし / 色 : button-action</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-action">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-action button-rounded">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-action button-pill">Go</a>

<br><br><b class="gttl">サイズ : button-large / 色 : button-highlight</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-highlight button-large">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-highlight button-rounded button-large">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-highlight button-pill button-large">Go</a>

<br><br><b class="gttl">サイズ : button-jumbo / 色 : button-caution</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-caution button-jumbo">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-caution button-rounded button-jumbo">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-caution button-pill button-jumbo">Go</a>

<br><br><b class="gttl">サイズ : button-giant / 色 : button-royal</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-royal button-giant">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-royal button-rounded button-giant">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-royal button-pill button-giant">Go</a>

<br><br><b class="gttl">表現方法 : button-3d</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-3d button-primary button-rounded">日本語でもOKですが</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-3d button-action button-pill">button クラスの font-family を</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-3d button-caution">上書きしないと</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-3d button-royal">想定したフォントになりません</a>

<br><br><b class="gttl">表現方法 : button-raised</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-primary button-pill">ようこそ!</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-caution">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-royal">こんにちは!</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-pill button-inverse">黒は button-inverse</a>
  
<br><br><b class="gttl">表現方法 : button-longshadow-right</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-primary button-pill button-longshadow-right">普通の文字でも</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-caution button-longshadow-right">影は</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-royal button-longshadow-right">使えます</a>
<br>
<a href="http://matome.naver.jp/odai/2131896140848768101" class="button button-raised button-pill button-inverse button-longshadow-right"><span style="font-size:30px;">&#9822;</span></a>

<br><br><b class="gttl">表現方法 : button-glow</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-glow button-rounded button-raised button-primary">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-glow button-rounded button-highlight">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-glow button-rounded button-caution">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-glow button-rounded button-royal">Go</a>
  
<br><br><b class="gttl">表現方法 : button-3d と button-border</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-border button-3d button-primary button-rounded button-jumbo">OK</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-border button-3d button-caution button-rounded" style="height:80px;line-height:40px">br 要素で改行する場合は<br>heightとline-height指定が必要です</a>

<br><br><b class="gttl">表現方法 : button-glow と button-border</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-border button-glow button-primary button-rounded button-jumbo">OK</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-border button-glow button-caution button-rounded" style="height:84px;line-height:40px">br 要素で改行する場合は<br>heightとline-height指定が必要です</a>



</div>

HTML / CSS

タイトルの背景画像を CSS でスクロールさせて雪を降らせ、after を使って画像で装飾する

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

CENTER 要素内での position:absolute で、位置指定されていない場合の振る舞い

INPUT type="number" の振る舞いをブラウザ間で調整する

META 要素の viewport で content 内の区切り文字に ;(セミコロン) を使うと Google Chrome で警告が出ました。

CSS の display に 設定する inline-table と inline-block を交互に設定して効果を確認

ブロックレベル要素内のブロックレベル要素を常に中央に表示する jQuery のデモ

IE9 以降での完全な「データ URI」の利用 / WEBページにバイナリデータを埋め込む / data Protocol

CSS で、white-space に pre-line を指定している PRE 要素内の ブラウザ毎の結果の違い

TABLE要素を使わずに DIV 要素を使って横方向にエリアを配置する

HTML : 画像を使ったボタンのバリエーション

Picasa と list-style-image を使って、リストのマークをフォントサイズに合わせて拡大・縮小して利用する

WEB フォントの記述方法の考察

これがいい方法かどうかは解りませんが、直観的で解りやすい UL 要素内の LI 間の改行調整

Google Chrome で IFRAME の frameborder="yes" が動作しないのですが(一般仕様はともかくとして)、よくよくブラウザ別に比べるとかなり違います。

CSS3 の角丸を IE8以前でも使うには( ブログで使うには )

CSS : display / vertical-align