Waves の適用
waves 効果は任意の要素に適用できます。waves 効果をボタンに適用するには、waves-effect
クラスをボタンに適用するだけです。波の効果を白くしたい場合は、waves-effect waves-light
の両方をクラスとして追加します。
<a class="waves-effect waves-light btn-large" href="#">Wave</a>
カスタマイズ
waves をカスタマイズするにはいくつかの方法があり、作成済みのクラスを使用することも、新しいクラスを作成して独自の色を定義することもできます。
利用可能な色
これらを使用するには、対応するクラスをボタンに追加するだけです。ボタンの背景色と波の効果を変更して、멋なものを作成してみましょう!
<a href="#!" class="btn waves-effect waves-teal">Send</a>
カスタムカラー
必要な色が利用できない場合は、カスタム CSS クラスを作成することで簡単に独自の waves カラーを作成できます。茶色の waves 効果を追加する次の例を参照してください。
/*
When creating your CSS selector,
change "brown" to something of your choosing
*/
.waves-effect.waves-brown .waves-ripple {
/* The alpha value allows the text and background color
of the button to still show through. */
background-color: rgba(121, 85, 72, 0.65);
}