button

ボタンを設置します。

もくじ

使い方1

&button(URL,オプション){表示文字};

使い方2

#button(URL){{
表示文字
}}

URLについて

最初のパラメーターにはリンク先のページ名やURLを指定します。

//指定したページへリンク
&button(Purchase,primary){今すぐ購入};

//指定したURLへリンク
&button(http://www.example.com/touch.html,info){お問い合せ};

オプション

名前説明
primary青いボタンを表示します
info水色のボタンを表示します
success緑色のボタンを表示します
warning黄色のボタンを表示します
danger赤色のボタンを表示します
round角丸のボタンを表示します
gradientグラデーションのかかったボタンを表示します
ghost背景色が透明で枠線のみのボタンを表示します
ghost-wghostの枠線と文字が白いボタンを表示します。
背景が白い部分では使用しないようにしてください
large
lg
大きいボタンを表示します
small
sm
小さいボタンを表示します
xs極小のボタンを表示します
block横幅いっぱいにボタンを表示します
window=windowname別ウィンドウで開くウィンドウ名を指定します

サンプル

サイズ

// 書き方 

&button(#,large){大きいボタン};

&button(#){ふつうのボタン};

&button(#,small){小さいボタン};

&button(#,xs){かなり小さいボタン};

// 書き方 

&button(#){指定なし};

&button(#,info){水色ボタン:info};

&button(#,primary){青色ボタン:primary};

&button(#,success){緑色ボタン:success};

&button(#,warning){オレンジ色ボタン:warning};

&button(#,danger){赤色ボタン:danger};

その他いろいろ

// 書き方

&button(#,info,ghost){水色ふち取りボタン};

&button(#,primary,gradient){青色グラデーションボタン};

&button(#,warning,block){オレンジブロックボタン};


ボタンのリンク先に別ページへのアンカーを設定する場合

ボタンをクリックして、別ページへのアンカー場所へリンクさせる場合は、URLの最後に#アンカー名を付けて、ボタンのリンク先にURLを指定して下さい。

&button(http://◯◯◯.com#アンカー名){ボタンに表示させる文字};