はじめに
Materializeを使用すれば、マテリアルデザインを簡単に実装できます
似たようなcssフレームワークで一番有名なものにBootstrapがあります
Bootstrapではボタンの色をクラス名(btn-primary
やbtn-secondary
など)で簡単に変更できますが、Materializeのボタンの説明ページには色を変更する方法が見当たりませんでした
Documentation - Materialize
Materialize is a modern responsive CSS framework based on Material Design by Google.
Materializeもクラスで色変更が可能
MaterializeもBootstrap同様クラスでの色変更が可能です
Colorのページに記載されているクラスが指定できます
例えば青系の「#1e88e5 blue darken-1」にしたい場合、カラーコード以降の「blue darken-1」をクラスに指定すればOKです
<button type="button" class="btn blue darken-1">送信</button>
注意事項として、そのままだとボタン内部の文字色は白なので、明るい色の場合は別途文字色を変更する必要があります
下記例では「black-text」を追加し文字を黒にしています
<button type="button" class="btn red lighten-5 black-text">送信</button>