【Materialize】フラットデザインボタンの、オンマウス時の背景色

Question

質問概要

CSSフレームワーク、「Materialize」の
class="btn-flat"を指定したときの、オンマウス時の背景色の変更方法を知りたい。

質問

CSSフレームワーク、「Materialize」のボタンデザインで、class="btn-flat"を指定したときの、オンマウス時の背景色の変更方法が分かりません。

例えば、

<a href="#" class="waves-effect waves-light btn-flat light-blue darken-4">Link</a>

とした時、これは最初から背景色がlight-blue darken-4になってしまいます。

オンマウス時の背景色を変えるには、直接CSSファイルを弄るしか無いのでしょうか？
ご存じの方いらっしゃいましたら、ご教示頂けますとうれしいです。

Answer 1

残念ながらそのような機能は実装されていないようです。
公式の issue にも似たような話題が挙がっていますが、進展なさそうです。

公式のColorページ - Sass の項にあるように @extendを使って:hoverの背景色を変更させるか、

シンプルに

  <a class="waves-effect waves-teal btn-flat my-btn-flat">Button</a>

.my-btn-flat {
	color: white;
	background-color: red;
	
	&:hover {
		background-color: lighten(red, 20%);
	}
}

こんな感じで上書きしてしまうか、のような方法になりそうです。

Comments

[nnahito]

ご回答ありがとうございます。

＞公式の issue にも似たような話題が挙がっていますが、進展なさそうです。
なるほど…そうなのですね…
上書きの手段を利用させていただきます！

しかし、
&:hover {
background-color: lighten(red, 20%);
}

という書き方ができるですね！
こちらも勉強にありました！
ありがとうございます

[ezaki]

上書きについてコメントありましたのでちょっと補足させてもらいますね。

&:hover と lighten (反対の記述として暗くするdarkenもあります)は
どちらも SCSS 記法になります。

cssで書かれる場合は
.my-btn-flat:hover {background-color:#EF5350 }
のように素直に書くことになりますね。

[nnahito]

コメントありがとうございます。

SCSS……単語は聞いたことありますが、実態なんなのかは知らないですね……
勉強してみます、ありがとうございます！