リンクするためのページがないため、"404" メッセージを取得しないように、リンクとして # 指定しています。 実際には、勿論特定ページへの実 URL となっている必要があります。
Foundation は、6種類のボタンを提供します。.button クラスは、パディング付きの青いボタンを作ります。
色を変えるには、.secondary、.success、.info、.warning または .alert をついかします：
<button type="button" class="button">Default</button>
<button
type="button" class="button secondary">Secondary</button>
<button
type="button" class="button success">Success</button>
<button
type="button" class="button info">Info</button>
<button type="button"
class="button warning">Warning</button>
<button type="button"
class="button alert">Alert</button>
結果：
button クラスは、<a>、<button> または <input> 要素に
使用することができます：
<a href="#" class="button info" role="button">Link Button</a>
<button
type="button" class="button info">Button</button>
<input type="button"
class="button info" value="Input Button">
<input type="submit"
class="button info" value="Submit Button">
結果：
Try it Yourself » |
なぜリンクの href 属性に # 指定しているのか？ リンクするためのページがないため、"404" メッセージを取得しないように、リンクとして # 指定しています。 実際には、勿論特定ページへの実 URL となっている必要があります。 |
|---|
ボタンのサイズを変えるときには、.large、.small または .tiny
を使用します：
<button type="button" class="button large">Large</button>
<button
type="button" class="button">Default</button>
<button type="button"
class="button small">Small</button>
<button type="button" class="button
tiny">Tiny</button>
結果：
.radius および .round クラスは、コーナーに丸みを付けます：
<button type="button" class="button">Default Button</button>
<button type="button" class="button
radius">Radius Button</button>
<button type="button" class="button
round">Round Button</button>
結果：
.expand クラスは、ボタンを親要素の幅全体 (100% width)までに広げることができます：
<button type="button" class="button">Default Button</button>
<button
type="button" class="button expand">Expanded Button</button>
結果：
.disabled クラスは、ボタンをクリックできないようにします：
<button type="button" class="button">Default Button</button>
<button
type="button" class="button disabled">Disabled Button</button>
結果：