疑似ボタンを使ってみよう

表示サンプル

このサンプルのコード

<a class="btn" href="#" role="button">Normal Button</a>
<a class="btn btn-blue" href="#" role="button">Blue Button</a>
<a class="btn btn-lightblue" href="#" role="button">Lightblue Button</a>
<a class="btn btn-orange" href="#" role="button">Orange Button</a>
<a class="btn btn-pink" href="#" role="button">Pink Button</a>
<a class="btn btn-red" href="#" role="button">Red Button</a>
<a class="btn btn-primary" href="#" role="button">Primary Button</a>
<a class="btn btn-green" href="#" role="button">Green Button</a>
<a class="btn btn-black" href="#" role="button">Black Button</a>
<a class="btn disabled" role="button">Disabled Button</a>

見出しラベルで注目を集めよう

表示サンプル

Labelラベルサンプル
Newラベルサンプル
Blueラベルサンプル
Greenラベルサンプル
Primaryラベルサンプル
Orangeラベルサンプル
Pinkラベルサンプル
Redラベルサンプル
Blackラベルサンプル

このサンプルのコード

<span class="label">Label</span><span>ラベルサンプル</span>
<span class="label label-blue">New</span><span>ラベルサンプル</span>
<span class="label label-lightblue">Blue</span><span>ラベルサンプル</span>
<span class="label label-green">Green</span><span>ラベルサンプル</span>
<span class="label label-primary">Primary</span><span>ラベルサンプル</span>
<span class="label label-orange">Orange</span><span>ラベルサンプル</span>
<span class="label label-pink">Pink</span><span>ラベルサンプル</span>
<span class="label label-red">Red</span><span>ラベルサンプル</span>
<span class="label label-black">Black</span><span>ラベルサンプル</span>

アイコンフォントと組み合わせてラベルを表示

表示サンプル

OK

Point!

Check!

Attention!

このサンプルのコード

<p class="label label-green icon-ok">OK</p>
<p class="label label-primary icon-pencil">Point!</p>
<p class="label label-pink icon-search">Check!</p>
<p class="label label-red icon-attention">Attention!</p>

画像を使わないWebフォントによるアイコン表示

以下のアイコンはすべてDigiPressに組み込まれているWebフォントによって表示しています。
アイコンを表示したいテキストやブロック要素のタグに、class="icon-star"などのクラスを指定するだけで表現できます。

フォントデータなので、Retinaなどの高精細ディスプレイでも画像のように解像度の問題で粗くなることもありません。

表示サンプル

DigiPressは、専用のサイトテンプレートです。
レスポンシブ・ウェブ・デザインだから でも でもフレキシブルにレイアウトを最適化します。

お問い合わせは 012-345-6789 まで。

このサンプルのコード

<div class="al-c">
<a class="ft22px btn btn-green icon-android">Download App</a> <a class="ft22px btn btn-black icon-apple" href="#">Available on App Store!</a> <a class="ft16px btn icon-basket" href="#">Add to cart</a> <a class="icon-mail btn btn-red" href="#">E-Mail</a> <a class="btn btn-blue icon-facebook" href="#">Like</a> <a class="btn btn-lightblue icon-twitter" href="#">Tweet</a> <a class="btn btn-pink icon-pocket" href="#">Pocket</a>
</div>
DigiPressは、<i class="icon-wordpress ft30px blue"></i>専用のサイトテンプレートです。
レスポンシブ・ウェブ・デザインだから <i class="icon-tablet"></i> でも <i class="icon-desktop"></i> でもフレキシブルにレイアウトを最適化します。

お問い合わせは <a href="tel:0123456789" class="icon-phone ft25px"><span class="serif i b">012-345-6789</span></a> まで。

利用可能なアイコン