マテリアルデザインで述べられている3つの主なボタンタイプがあります。フラットなページに奥行き感を与える動作を表す標準的なボタンがレイズドボタンです。フローティング円形アクションボタンは非常に重要な機能を意図しています。フラットボタンは通常、カードやモーダルのようにすでに奥行きのある要素内で使用されます。
レイズド
ボタン cloudボタン cloudボタン
<a class="waves-effect waves-light btn">button</a>
<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>
フローティング
追加
<a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
フローティングアクションボタン
このページでドキュメントを参照してください。
フラット
フラットボタンは過剰なレイヤーを軽減するために使用されます。例えば、フラットボタンは通常カードやモーダル内のアクションに使用され、重なるシャドウが多すぎません。
ボタン
<a class="waves-effect waves-teal btn-flat">Button</a>
サブミットボタン
inputタグを使用する代わりにフォームを送信するためにボタンを使用する場合、type submitのボタンタグを使用します
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
大
このボタンは、より注目が必要なボタンに大きな高さを備えています。
ボタン cloudボタン cloudボタン
<a class="waves-effect waves-light btn-large">Button</a>
<a class="waves-effect waves-light btn-large"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn-large"><i class="material-icons right">cloud</i>button</a>
小
マウスとキーボードが主な入力方式である場合、この小さいボタンは、密度が濃いUIレイアウトに便利です。
ボタン cloudボタン cloudボタン
<a class="waves-effect waves-light btn-small">Button</a>
<a class="waves-effect waves-light btn-small"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn-small"><i class="material-icons right">cloud</i>button</a>