Materializeでボタンの色の変更方法

webデザイン

はじめに

Materializeを使用すれば、マテリアルデザインを簡単に実装できます
似たようなcssフレームワークで一番有名なものにBootstrapがあります
Bootstrapではボタンの色をクラス名(btn-primarybtn-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>
タイトルとURLをコピーしました